仅选择javascript中的当前click(div)项

时间:2017-04-25 18:57:48

标签: javascript jquery html css css3

我正在尝试实现网格系统,如果我点击其中一个div,它会放大而其他div消失。

如何单独选择这两个元素以便

  1. 当前点击div放大
  2. 其余元素淡出
  3. 
    
    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>
    &#13;
    &#13;
    &#13;

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

    由于

2 个答案:

答案 0 :(得分:0)

你可以使用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>

请注意,旧浏览器可能不支持querySelectorAllpointer-eventsclassList,但您可以使用较旧的js方法修复它。

答案 1 :(得分:0)

您可以向所有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制作动画。