在javascript中仅选择当前单击（div）项

Question

我正在尝试实现网格系统，如果我单击其中一个 div，它会放大，而其他 div 会淡出。

如何分别选择这两个元素，以便

1. 当前点击 div 放大
2. 其余元素淡出

var slider= $('.image_slide');

slider.on('click', function(){

    slider.css('opacity', 0);

});

.slider_images{
  height:200px;
  width:200px;
}

.image_slide{
  padding:40px;
  display:block;
  background-color:#555; 
  width: 40%;
  margin-top:20px;
  color:white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slider_images>
           <a href= "#" class="image_slide">IMAGE 1 </a>
           <a href= "#" class="image_slide">IMAGE 2 </a>
           <a href= "#" class="image_slide">IMAGE 3 </a>
           <a href= "#" class="image_slide">IMAGE 4 </a>
        </div>

在这里，通过单击其中一个 div，我希望单击的 div 放大，而其他 div 消失。 Javascript 和 Jquery 如何在选择其他元素进行其他交互的同时捕获当前的点击事件？

谢谢

Answer 1

您可以为所有div 添加一个点击事件，并在点击事件中选择所有它们并让它们淡出。要获得被点击放大的那个，您可以使用this 选择它，然后恢复淡出并进行放大。

document.getElementsByTag("div").addEventListener("click", function() {
    var divs = document.getElementsByTag("div"); //This are all your divs
    divs.foreach(function() {
       this.classList.remove("zoom-in"); //Could be that a element is already zoomed in what have to be reseted first
       this.classList.add("fades-out"); //Or However you do your fade out
    }
    this.classList.remove("fade-out");
    this.classList.add("zoom-in"); //Add your zoom effect
)};

我假设您在本例中使用 css 制作动画。

Answer 2

您可以使用 css 和一点点 js 代码来实现它，而无需任何 jQuery。但是你可以使用 jQuery 特性来调整这段代码。

document.querySelectorAll(".item").forEach((element, n, all) => {
    element.addEventListener("click", () => {
        all.forEach(item => item.classList.remove("selected"))
        element.classList.add("selected");
    });
});

.container{
  border: 2px solid black;
  display: inline-block;
  position: relative;
}

.item {
  display: inline-block;
  background: red;
  width: 80px;
  height: 80px;
  margin: 20px;
  transition: 1s;
  color: white;
  padding: 10px;
  opacity: 0.5;
}

.item.selected {
  transform: scale(1.3);
  opacity: 1;
  box-shadow: 0 0 10px black;
}

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

请注意，querySelectorAll、pointer-events、classList 在旧浏览器上可能不支持，但您可以使用旧 js 方法修复它。