javascript - 是否可以缩短我编写的这段 JavaScript 代码

Question

我为一家在线商店编写了一些 javascript 代码，但是以菜鸟的方式......

$('div[id^="optionen"] div.wert:nth-child(1) input#format').on("change", function() {
    //alert('123');
    $('div[id^="optionen"] div.expander').addClass('hidden').css('display','none');
    $('div[id^="optionen"] div.expander:nth-child(1)').removeClass('hidden').css('display','block');
    $('div[id^="optionen"] div.expander:nth-child(2)').removeClass('hidden').css('display','block');
    $('div[id^="optionen"] div.expander:nth-child(3)').removeClass('hidden').css('display','block');
    $('div[id^="optionen"] div.expander:nth-child(4)').removeClass('hidden').css('display','block');
    $('div[id^="optionen"] div.expander:nth-child(5)').removeClass('hidden').css('display','block');
    $('div[id^="optionen"] div.expander:nth-child(6)').removeClass('hidden').css('display','block');
    $('div[id^="optionen"] div.expander:nth-child(7)').removeClass('hidden').css('display','block');
    $('div[id^="optionen"] div.expander:nth-child(8)').removeClass('hidden').css('display','block');
    $('div[id^="optionen"] div.expander:nth-child(9)').removeClass('hidden').css('display','block');
    $('div[id^="optionen"] div.expander:nth-child(10)').removeClass('hidden').css('display','block');
    $('div[id^="optionen"] div.expander:nth-child(11)').removeClass('hidden').css('display','block');
    $('div[id^="optionen"] div.expander:nth-child(12)').removeClass('hidden').css('display','block');
    $('div[id^="optionen"] div.expander:nth-child(13)').removeClass('hidden').css('display','block');
}); 

$('div[id^="optionen"] div.wert:nth-child(2) input#format').on("change", function() {
    //alert('123');
    $('div[id^="optionen"] div.expander').addClass('hidden').css('display','none');    
    $('div[id^="optionen"] div.expander:nth-child(1)').removeClass('hidden').css('display','block');
    $('div[id^="optionen"] div.expander:nth-child(14)').removeClass('hidden').css('display','block');
    $('div[id^="optionen"] div.expander:nth-child(15)').removeClass('hidden').css('display','block');
    $('div[id^="optionen"] div.expander:nth-child(16)').removeClass('hidden').css('display','block');
    $('div[id^="optionen"] div.expander:nth-child(17)').removeClass('hidden').css('display','block');
    $('div[id^="optionen"] div.expander:nth-child(18)').removeClass('hidden').css('display','block');
    $('div[id^="optionen"] div.expander:nth-child(19)').removeClass('hidden').css('display','block');
    $('div[id^="optionen"] div.expander:nth-child(20)').removeClass('hidden').css('display','block');
    $('div[id^="optionen"] div.expander:nth-child(21)').removeClass('hidden').css('display','block');
    $('div[id^="optionen"] div.expander:nth-child(22)').removeClass('hidden').css('display','block');
    $('div[id^="optionen"] div.expander:nth-child(23)').removeClass('hidden').css('display','block');
    $('div[id^="optionen"] div.expander:nth-child(24)').removeClass('hidden').css('display','block');
    $('div[id^="optionen"] div.expander:nth-child(25)').removeClass('hidden').css('display','block');
}); 

还有四个函数用于另外四个输入，其中只有第 n 个子级的值不同。

我相信可以缩短这段代码吗？谁能告诉我怎么做？

Answer 1

您可能想查看 :nth-child 的选项伪类。您可以使用 :nth-child(<b>-n+13</b>) 来定位前 13 个 child 。 .

$('div[id^="optionen"] div.wert:nth-child(1) input#format').on("change", function() {
  $('div[id^="optionen"] div.expander')
    .addClass('hidden')
    .css('display','none');
  $('div[id^="optionen"] div.expander:nth-child(<b>-n+13</b>)')
    .removeClass('hidden')
    .css('display','block')
});

要获得 14 到 25，您可以使用 :nth-of-type(<b>n+14</b>):nth-of-type(<b>-n+25</b>)