Question

I wrote some code of javascript for an online-shop, but in the noob-way...

$('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');
});

There are four more functions for four further inputs, where only the value of the nth-child differs.

I believe it's possible to shorten this code? Can someone tell me how?

Answer 1

You may simply loop over the items you want to change

$('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');
    }
});

Answer 2

You might want to look into the options for the :nth-child pseudo-class. You can target the first 13 children with :nth-child(-n+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')
});

To get 14 through 25, you'd use :nth-of-type(n+14):nth-of-type(-n+25)

Answer 3

This code should do exact same than what You posted.

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");
}

Answer 4

First thing that comes to my mind is to iterate through this:

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

Since X is the only thing changing here from 1 to 25.

But, I'm sure you can just create a better selector and this all of this in one line. Show us your HTML so we can try to help.

Answer 5

Short and general answer: get an array of the jquery objects you want to mutate, divs, possibly using a selector with a common class on those divs, or using .children() from the parent element, however makes most sense, then:

divs.forEach(function(div) {
   div.removeClass('hidden').css('display','block');
)};

Is it possible to shorten this javascript-code I wrote

5 个答案: