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

Posted 2023-05-08

【中文标题】在javascript中仅选择当前单击（div）项

【英文标题】：Selecting only the current click (div) item in javascript

【发布时间】：2017-09-22 22:47:36

【问题描述】：

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

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

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

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 如何在选择其他元素进行其他交互的同时捕获当前的点击事件？

谢谢

【问题讨论】：

您可以发布您尝试过的代码以便我们进行故障排除吗？

请展示您尝试过的内容以及minimal reproducible example

How do I animate a scale css property using jquery?的可能重复

【参考方案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 制作动画。

【参考方案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 方法修复它。

【讨论】：

感谢您的回复，但在这里，您能否以这样的方式进行交互，一旦我点击其中一个 div，它会放大，而其他 div 会消失。