2021-10-16 Facepile

by Ttt Yyy

HTML

<div class='more'>
  Content Above
  </div>
<ul id='container'>
  <li>
    <a class='item' href='#'>
      <img src='#' />
    </a>
  </li>
  <li>
    <a class='item' href='#'>
      <img src='#' />
    </a>
  </li>
    <li>
    <a class='item' href='#'>
      <img src='#' />
    </a>
  </li>
    <li>
    <a class='item' href='#'>
      <img src='#' />
    </a>
  </li>
    <li>
    <a class='item' href='#'>
      <img src='#' />
    </a>
  </li>
    <li>
    <a class='item' href='#'>
      <img src='#' />
    </a>
  </li>
    <li>
    <a class='item' href='#'>
      <img src='#' />
    </a>
  </li>
    <li>
    <a class='item' href='#'>
      <img src='#' />
    </a>
  </li>
    <li>
    <a class='item' href='#'>
      <img src='#' />
    </a>
  </li>
  
</ul>
<div class='clearfix' />
<div class='more'>
  Content Below
</div>
<div id='console-1'></div>
<div id='console-2'></div>

CSS

.more {
  background-color: #eee;
  padding: 10px;
}

#container {
  display: flex;
  flex-wrap: wrap;
  width: 200px;
  margin: -2px 0 0 0;
  padding: 0;
  list-style: none;
}

#container li {
  line-height: 0;
  margin-top: 2px;
  margin-right: 2px;
  /* list-style: none; */
  /* float: left; */
}

/* .clearfix {
  clear: both;
} */

#container img {
  width: 30px;
  height: 30px;
}

JavaScript

const facepile = document.getElementById("container");
const console1 = document.getElementById("console");

// method 1: event delegation
facepile.addEventListener(
  "click",
  function (e) {
    let target = e.target;
    while (target.tagName !== "LI") {
      target = target.parentNode;
    }
    let index = 0;
    while (target.previousSibling) {
      index++;
      target = target.previousSibling;
    }
    document.getElementById("console-1").innerHTML = index;
  },
  false
);

// method 2: add listeners to each child
let children = facepile.children;
let index = 0;
for (let i = 0; i < children.length; i++) {
  index++;
  let currentIndex = index;
  children[i].addEventListener(
    "click",
    () => {
      document.getElementById("console-2").innerHTML = currentIndex;
    },
    false
  );
}