javascriptの現在のクリック（div）アイテムのみを選択する

Question

私はdivシステムを実装しようとしています。divの1つをクリックすると、他の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>

をフェードアウトズームイン

1. ように、私は別に、これらの両方の要素を選択するにはどうすればよい

   divの1つをクリックすると、私はliクリックしたdivをズームインして他のものは消えます。 JavascriptとJqueryは、他の要素を選択して別の相互作用を行う際に、現在のクリックイベントをどのようにキャプチャできますか？

   ありがとう

Answer 1

これはcssとjQueryを使用しない少しのjsコードを使用して実装できます。しかし、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のアプローチを使用して、それを修正することができますしてください。

Answer 2

クリックイベントをすべて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であなたのアニメーションを行っていることを前提としています。