テーブルに一致するクラスを持つ「a」要素をクリックして、対応するテーブルを表示および非表示にするにはどうすればよいですか？トグルを実行して各クラスを指定することはできますが、「a」クラスを一致するクラスを持つテーブルに一致させる動的なものが必要です。
これがサンプルHTMLです
<a class="franchise_0001">CLICK AND SHOW table.franchise_0004</a>
<a class="franchise_0002">CLICK AND SHOW table.franchise_0003</a>
<a class="franchise_0003">CLICK AND SHOW table.franchise_0003</a>
<a class="franchise_0004">CLICK AND SHOW table.franchise_0003</a>
<table class="franchise_0001" style="display:none">SHOW WHEN a.franchise_0003 is clicked</table>
<table class="franchise_0002" style="display:none">SHOW WHEN a.franchise_0003 is clicked</table>
<table class="franchise_0004" style="display:none">SHOW WHEN a.franchise_0004 is clicked</table>
<table class="franchise_0003" style="display:none">SHOW WHEN a.franchise_0003 is clicked</table>
クラスは変更される可能性があり、一致する方法が必要なため、今のようにそれぞれを宣言したくありません
$("a.franchise_0004").click(function(){
$("table.franchise_0004").toggle();
});
を使用して、任意のオブジェクトのクラスを取得できます$.attr('class')。
クラスを取得して、テーブルに渡します。
$("a").click(function(){
$("table."+$(this).attr('class')).toggle();
});
クラスを使用してこれを切り替えることもできます。ご覧ください。
$(document).on('click', 'a', function(e){
e.preventDefault();
$("table."+$(this).attr('class')).toggleClass('visible');
});table {
display: none;
}
table.visible {
display: table;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a class="franchise_0001">CLICK AND SHOW table.franchise_0004</a><br />
<a class="franchise_0002">CLICK AND SHOW table.franchise_0003</a><br />
<a class="franchise_0003">CLICK AND SHOW table.franchise_0003</a><br />
<a class="franchise_0004">CLICK AND SHOW table.franchise_0003</a><br />
<br />
<table class="franchise_0001">
<tr><td>SHOW WHEN a.franchise_0001 is clicked</td></tr>
</table>
<table class="franchise_0002">
<tr><td>SHOW WHEN a.franchise_0002 is clicked</td></tr>
</table>
<table class="franchise_0003">
<tr><td>SHOW WHEN a.franchise_0003 is clicked</td></tr>
</table>
<table class="franchise_0004">
<tr><td>SHOW WHEN a.franchise_0004 is clicked</td></tr>
</table>この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加