jquery - 最小化 12 行 jquery 为一

Question

我有这行jquery:

$( "#flt21_BD2015" ).click(function() {
    $('#flt9_BD2015').closest( "td" ).toggle();
    $('#flt10_BD2015').closest( "td" ).toggle();
    $('#flt11_BD2015').closest( "td" ).toggle();
    $('#flt12_BD2015').closest( "td" ).toggle();
    $('#flt13_BD2015').closest( "td" ).toggle();
    $('#flt14_BD2015').closest( "td" ).toggle();
    $('#flt15_BD2015').closest( "td" ).toggle();
    $('#flt16_BD2015').closest( "td" ).toggle();
    $('#flt17_BD2015').closest( "td" ).toggle();
    $('#flt18_BD2015').closest( "td" ).toggle();
    $('#flt19_BD2015').closest( "td" ).toggle();    
    $('#flt20_BD2015').closest( "td" ).toggle();
});

和

$( "#flt34_BD2015" ).click(function() {
    $('#flt22_BD2015').closest( "td" ).toggle();
    $('#flt23_BD2015').closest( "td" ).toggle();
    $('#flt24_BD2015').closest( "td" ).toggle();
    $('#flt25_BD2015').closest( "td" ).toggle();
    $('#flt26_BD2015').closest( "td" ).toggle();
    $('#flt27_BD2015').closest( "td" ).toggle();
    $('#flt28_BD2015').closest( "td" ).toggle();
    $('#flt29_BD2015').closest( "td" ).toggle();
    $('#flt30_BD2015').closest( "td" ).toggle();
    $('#flt31_BD2015').closest( "td" ).toggle();
    $('#flt32_BD2015').closest( "td" ).toggle();    
    $('#flt33_BD2015').closest( "td" ).toggle();
});

可以尽量减少这种情况吗？类似...

将其从#flt9_BD2015改为#flt20_BD2015。

与其他相同:

将其从 #flt22_BD2015 更改为 #flt33_BD2015。

Answer 1

尝试使用 ID 属性“ends with”选择器:

$("[id$='_BD2015']").closest( "td" ).toggle();

现在将选择所有这些，因此您需要(显示)该列表中的特定项目数。这将变得高度依赖于长度:(

$("[id$='_BD2015']").closest( "td" ).slice(0,12).toggle();

如果您需要其中的“其余”，您可以执行下一个 12 或所有其余的:如您所见，这开始变得非常难看。

$("[id$='_BD2015']").closest( "td" ).slice(13,12).toggle();

$("[id$='_BD2015']").closest("td").slice(0,12).last().nextAll().toggle();

注意:这是类选择器的主要情况

编辑:通过添加问题澄清(点击处理程序)，您可以在某种程度上简化此操作:

$( "#flt21_BD2015" ).click(function() {
    $(this).closest("td").prevAll().toggle():
});

注意:这个可能不起作用，具体取决于 ID 的目标 - 某些表中的某些内容，但您需要提供一些 HTML 或一些结构的指示，以便更好地处理此问题。

如果这些都不能正常工作，因为我们不知道实际的结构，请使用 @richessler 建议(包括所有 ID)或按照我在此处的建议添加类。 <td class="tdclassfirst">