jquery：該当するリンクがクリックされたときに特定のdivを表示したい

Question

jqueryの初心者です。基本的には、クリックされたリンクに対応するdivのみを表示し、そのリンクに関係のないdivを非表示にしたいとします。

以下は、私がやりたいことと私が苦労しているスクリプトの例です。これはWordpressのためのもので、 "$"だけではなく "JQuery"のスペルが書かれています。

jQuery(document).ready(function() { 
 
\t var clickLink = [".link1", ".link1", ".link1"]; 
 
\t var toggleDiv = ["#link1", "#link1", "#link1"]; 
 
\t for (i=0; i < toggleDiv.length; i++) { 
 
\t \t jQuery(toggleDiv[i]).hide(); 
 
\t } 
 
\t jQuery('#linkBank a').click(function() { 
 
      for (i=0; i < clickLink.length; i++) { 
 
      \t \t if (this.id == clickLink[i]) { 
 
      \t \t \t jQuery(toggleDiv[i]).toggle(); 
 
      \t \t } 
 
      } 
 
      
 
      return false; 
 
     }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script> 
 
<div id="linkBank"> 
 
<a href="#" id="link1">First Link</a> 
 
<a href="#" id="link2">Second Link</a> 
 
<a href="#" id="link3">Third Link</a> 
 
</div> 
 

 
<div class="link1">You clicked on First Link</div> 
 
<div class="link2">You clicked on Second Link</div> 
 
<div class="link3">You clicked on Third Link</div>

Answer 1

あなたはHTMLデータ属性を利用すると、表示する要素を知るために、それを使用する必要があり、それはクリーンな方法だとあなたは、値またはIDの配列に依存しません値は表示するクラスと同じです。この例では、 'data-show' html属性に名前を付けました。その値は基本的に選択したい要素のセレクタです（たとえば、 'sth'クラスの要素の場合は '.sth'、#fooの場合はidを持つ要素 'foo' でなど）

jQuery(document).ready(function() { 
 
     var $divs = jQuery('.toggling-divs'); 
 
     $divs.hide(); 
 
\t jQuery('#linkBank a').click(function() { 
 
      $divs.hide(); 
 
      var showDiv = jQuery(this).attr('data-show'); 
 
      jQuery(showDiv).show(); 
 
      
 
      return false; 
 
     }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script> 
 
<div id="linkBank"> 
 
<a href="#" id="link1" data-show=".first-link">First Link</a> 
 
<a href="#" id="link2" data-show=".sth-else">Second Link</a> 
 
<a href="#" id="link3" data-show=".foobar">Third Link</a> 
 
</div> 
 

 
<div class="first-link toggling-divs">You clicked on First Link</div> 
 
<div class="sth-else toggling-divs">You clicked on Second Link</div> 
 
<div class="foobar toggling-divs">You clicked on Third Link</div>