单击具有相同类的类时显示和隐藏表的最佳方式

<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>

在锚点和表上都使用same class。。。应该是：

// A click handler that applies on all a having a class starting by "franchise_"
$("a[class^='franchise_']").on("click", function() {
// Get the full class attribute
// The split and filter is to allow the table to have additionnal classes...
// We only need the one starting with "franchise_"
let myClass = $(this).attr("class").split(" ").filter(c=>c.indexOf("franchise_")>-1)

// Then if we have a class, use it to target the right table
if(myClass!==""){
$("table." + myClass).toggle()
}
})

a{
display: block;
}
table{
width: 100%;
margin: 1em 0;
}

<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_0001</a>
<a class="franchise_0002">CLICK AND SHOW table.franchise_0002</a>
<a class="franchise_0003">CLICK AND SHOW table.franchise_0003</a>
<a class="franchise_0004">CLICK AND SHOW table.franchise_0004</a>
<table class="franchise_0001 anotherClass" style="display:none">
<tr><td>SHOW WHEN a.franchise_0001 is clicked</td></tr>
</table>
<table class="franchise_0002" style="display:none">
<tr><td>SHOW WHEN a.franchise_0002 is clicked</td></tr>
</table>
<table class="franchise_0004" style="display:none">
<tr><td>SHOW WHEN a.franchise_0003 is clicked</td></tr>
</table>
<table class="franchise_0003" style="display:none">
<tr><td>SHOW WHEN a.franchise_0004 is clicked</td></tr>
</table>

但是，使用数据属性可以以更简单的方式获得相同的结果。

我推荐这一个，而不是第一个，因为(在我看来(当你必须向一个类添加数字时；独特的"；。。。逻辑总是有问题的。一个类旨在重新组合"；类似的"；元素。

// A click handler that applies on all a having a class starting by "franchise_"
$("a.franchise").on("click", function() {
// Get the tableID from the data attribute
let tableID = $(this).data("table_id")

// Then use it to target the right table
$("#"+tableID).toggle()
})

a{
display: block;
}
table{
width: 100%;
margin: 1em 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a class="franchise" data-table_id="F_0001">CLICK AND SHOW table.franchise_0001</a>
<a class="franchise" data-table_id="F_0002">CLICK AND SHOW table.franchise_0002</a>
<a class="franchise" data-table_id="F_0003">CLICK AND SHOW table.franchise_0003</a>
<a class="franchise" data-table_id="F_0004">CLICK AND SHOW table.franchise_0004</a>
<table id="F_0001" style="display:none">
<tr><td>SHOW WHEN a.franchise_0001 is clicked</td></tr>
</table>
<table id="F_0002" style="display:none">
<tr><td>SHOW WHEN a.franchise_0002 is clicked</td></tr>
</table>
<table id="F_0003" style="display:none">
<tr><td>SHOW WHEN a.franchise_0003 is clicked</td></tr>
</table>
<table id="F_0004" style="display:none">
<tr><td>SHOW WHEN a.franchise_0004 is clicked</td></tr>
</table>

尝试以下操作：

$("a").click(function(event){
var tableClass = $(event.target).attr('class')
$("table."+tableClass).toggle()
})

<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>
<table class="franchise_0001" style="display:none;">
<tr>
<td>SHOW WHEN a.franchise_0001 is clicked</td>
</tr>
</table>
<table class="franchise_0002" style="display:none;">
<tr>
<td>SHOW WHEN a.franchise_0002 is clicked</td>
</tr>
</table>
<table class="franchise_0004" style="display:none;">
<tr>
<td>SHOW WHEN a.franchise_0004 is clicked</td>
</tr>
</table>
<table class="franchise_0003" style="display:none;">
<tr>
<td>SHOW WHEN a.franchise_0003 is clicked</td>
</tr>
</table>

我的答案有点不同，因为我提出了改进HTML结构的方法。我建议用功能标签标记链接：

$('.table-toggler').click(function() {
$($(this).data('opens')).toggle()
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a class="table-toggler" data-opens=".franchise_0001">CLICK AND SHOW table.franchise_0004</a>
<table class="franchise_0001" style="display:none"><td>SHOW WHEN a.franchise_0003 is clicked</td></table>
我选择将.table-toggler添加到链接的原因是为了指示它们的功能并简化查询选择过程。
但是，目标被放入一个单独的属性中。这是因为如果链接和表不是共同的元素，则不应同时调用同一类。
如果您只想打开或关闭一个表，我建议使用id而不是类，因为类可能引用一些通用类型的元素。如果您有许多名为"；特许_ 0001"；，那么我建议使用类以外的其他属性，例如数据属性或名称。