同じクラス名を持つすべての要素に対してjavascript関数を呼び出す方法

Question

ユーザーがページ上の要素をクリックしたときに表示するポップアップウィンドウを取得しようとしています。私は、ポップアップが正しく機能するためのすべての機能を持っています。しかし、指定されたクラス名に一致するすべての要素に対して関数をポップアップさせるのに問題があります。私のコードは以下の通りです：

<script> 

     function descPop() { 

      // Description pop-up 
     // Get the modal 
     var modalprod = document.getElementById('myModalTwo'); 

     // Get the button that opens the modal 
     var btnprod = document.getElementsByClassName("add-but")[0]; 

     // Get the <span> element that closes the modal 
     var spanprod = document.getElementsByClassName("prod-close")[0]; 

     // When the user clicks on the button, open the modal 
     btnprod.onclick = function() { 
      modalprod.style.display = "block"; 
     } 

     // When the user clicks on <span> (x), close the modal 
     spanprod.onclick = function() { 
      modalprod.style.display = "none"; 
     } 

     // When the user clicks anywhere outside of the modal, close it 
     window.onclick = function(event) { 
      if (event.target == modalprod) { 
       modalprod.style.display = "none"; 
      } 
     } 
    } 

    </script> 

さて、私は現在、このコードはVARのbtnprodにインデックス0を割り当てていることを知っています。したがって、クラス名 "add-but"と一致する最初の要素をクリックすると、ポップアップが表示されます。クラス名が "add-but"のすべてのタグがウィンドウをポップアップするように、どのようにすべての要素を割り当ててアクセスするのですか？

おかげ

ソリューション：あなたはjqueryのタグを追加しましたが、ここにはjqueryのはありません

function descPop() { 

      // Description pop-up 
     // Get the modal 
     var modalprod = document.getElementById('myModalTwo'); 

     // Get the button that opens the modal 
     var btnprod = document.getElementsByClassName("add-but"); 

     // Get the <span> element that closes the modal 
     var spanprod = document.getElementsByClassName("prod-close"); 

     // When the user clicks on the button, open the modal 
     for (var i = 0; i < btnprod.length; i++) { 
      btnprod[i].onclick = function() { 
       modalprod.style.display = "block"; 
      } 
     } 

     // When the user clicks on <span> (x), close the modal 
     for (var i = 0; i < spanprod.length; i++) { 
      spanprod[i].onclick = function() { 
       modalprod.style.display = "none"; 
      } 
     } 


     // When the user clicks anywhere outside of the modal, close it 
     window.onclick = function(event) { 
      if (event.target == modalprod) { 
       modalprod.style.display = "none"; 
      } 
     } 
    } 

Answer 1

jQueryのオプションではない場合、あなたはそれを行うにはHtmlCollectionを反復処理することができます：

var btnprod = document.getElementsByClassName("add-but"); // <- this gives you a HTMLCollection 
for (var i = 0; i < btnprod.length; i++) { 
    btnprod[i].onclick = function() { 
     modalprod.style.display = "block"; 
    } 
} 

Answer 2

。 jQueryを使ってあなただけ書くことができます。

$('.classname').on ('click', function() { 
    //activate modal 
}); 

代わりに、このクラスを持つすべての要素に適用されます。この変数を参照し、コレクションとして変数に追加することができます。

var x = $('.classname'); 

Answer 3

次のようにコードを変更することができます。

$('.add-but').on('click', function() { 
 
    $(this).css('display', "none"); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="add-but"> 
 
    fafafafafa 
 
</div> 
 
<br> 
 
<div> 
 
    fafafaffafafaafafa 
 
</div> 
 
<br> 
 
<div class="add-but"> 
 
    fafafafafafafaafafafaffafa 
 
</div>

を

私は表示をbloの代わりにnoneに変更しました。この例ではckです。

これは、jQueryセレクタ、イベントバインディング、およびCSS関数を使用します。