2024-07-25 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")

// method 1 event delegation
facepile.addEventListener("click", (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
  );
}