Javascriptで各ドロップダウン・タブに一意の番号を追加する方法

Question

ドロップダウン・リストがあります。ドロップダウン・リストには、その特定のアイテムをクリックするまで各アイテムが閉じられています。

HTML：

<div id="dropdowntabs"> 
    <h2 class="drop"> 
    <a id="tabhead1" href="javascript:dropdowntabs('droptab1');">MAIN TITLE</a> 
    </h2> 
    <div name="droptab" class="droptab" id="droptab1" style="display:none;"> 
    <p>TEXT TO SHOW</p> 
    </div> 
</div> 

Javascriptを：

function dropdowntabs(selectedtab) { 
    $('div[name|="droptab"]').each(function(index) { 
     if ($(this).attr("id") == selectedtab) { 
     $(this).show(200); 
     } 
     else { 
     $(this).hide(600); 
     } 
    }); 
} 

各droptabは、それに割り当てられた別の番号を持っています。これはHTMLでもうまくいきますが、Wordpressで使用したかったのですが、手動で各タブに番号を割り当てることができないため、クリックするとすべて開いています。

誰かが増分で追加する番号を自動的に取得する方法を説明できますか。

非常に高く評価されています。 Jason。

Answer 1

代わりに一般的なトラバースを使用してください。見て：あなたはあなたがすでにそこにほぼすべてのコードを持っていた、対応するマッチング要素

$('.drop a').click(function() { 
 
    var $content = $(this).parent().next().show(200) 
 
    $('.droptab').not($content).hide(200); 
 
});

.droptab { 
 
    display: none 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="dropdowntabs"> 
 
    <h2 class="drop"> 
 
    <a>MAIN TITLE</a> 
 
    </h2> 
 
    <div class="droptab"> 
 
    <p>MAIN TITLE CONTENT</p> 
 
    </div> 
 
    <h2 class="drop"> 
 
    <a>SECOND TITLE</a> 
 
    </h2> 
 
    <div class="droptab"> 
 
    <p>SECOND TITLE CONTENT</p> 
 
    </div> 
 
</div>

Answer 2

に横断できるイベントハンドラthis内でそのイベントが発生する要素であり、その要素で始まります例：

この例では、idは不要で、選択と表示にそれぞれのインデックスを使用します。

//select on index not on ID 
 

 
function dropdowntabs(selectedtab) { 
 
    //select the index number comparing the clicked element to it's nodelist 
 
    $('div.droptab').each(function(index) { 
 
    if ($(this).index('div.droptab') == selectedtab) { 
 
     $(this).show(200); 
 
    } else { 
 
     $(this).hide(600); 
 
    } 
 
    }); 
 
} 
 

 
//Assign the click events 
 
$('h2.drop > a').on("click", function(e) { 
 
    //select the index number comparing the clicked element to it's nodelist 
 
    dropdowntabs($(this).index("h2 > a")); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="dropdowntabs"> 
 
    <a></a> 
 
    <!-- assign click handlers through code --> 
 
    <h2 class="drop"><a id="tabhead1" href="javascript:void(0);">MAIN TITLE</a> <a id="tabhead2" href="javascript:void(0);">MAIN TITLE 2</a></h2> 
 
    <div name="droptab" class="droptab" style="display:none;"> 
 
    <p>TEXT TO SHOW</p> 
 
    </div> 
 
    <div name="droptab" class="droptab" style="display:none;"> 
 
    <p>TEXT TO SHOW</p> 
 
    </div> 
 
</div>