有可能缩短我写的javascript代码吗?

Is it possible to shorten this javascript-code I wrote

本文关键字：javascript 代码 有可能      更新时间：2023-09-26

我为一个网上商店写了一些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个子元素的值不同。

我相信可以缩短这段代码?有人能告诉我怎么做吗?

您可能需要查看:nth-child伪类的选项。您可以针对:nth-child(-n+13)的前13个孩子。

$('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(-n+13)')
    .removeClass('hidden')
    .css('display','block')
});

从14到25，你可以使用:nth-of-type(n+14):nth-of-type(-n+25)

您可以简单地遍历您想要更改的项

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

这段代码应该和你发布的完全一样。

var wert = 'div[id^="optionen"] div.wert'; 
var exp = 'div[id^="optionen"] div.expander';
$(wert + ":nth-child(1) input#format").on("change", function() {
   hide($(exp));
   for(var i=1;i<=13;i++) {
      show($(exp + ":nth-child("+i+")"));
   }
}
$(wert + ":nth-child(2) input#format").on("change", function() {
   hide($(exp));
   show($(exp + ":nth-child(1)"));
   for(var i=14;i<=25;i++) {
      show($(exp + ":nth-child("+i+")"));
   }
}
// FUNTIONS TO HIDE AND SHOW LIKE YOU WANT IT
function show(ctx) {
   ctx.addClass("hidden").css("display", "none");
}
function hide(ctx) {
   ctx.removeClass("hidden").css("display", "block");
}

我想到的第一件事就是遍历这个:

$('div[id^="optionen"] div.expander:nth-child(**X**)').removeClass('hidden').css('display','block');

因为X是从1到25的唯一变化。

但是，我相信你可以创建一个更好的选择器，这些都在一行中。给我们看看你的HTML，这样我们可以试着帮你。

简短和一般的回答:得到一个数组的jquery对象，你想改变，divs，可能使用一个选择器与一个共同的类对这些div，或使用.children()从父元素，但最有意义，然后:

divs.forEach(function(div) {
   div.removeClass('hidden').css('display','block');
)};
相关文章：