縮短jQuery代碼

-1

我是jQuery的新手，並且下面的代碼一遍又一遍地重複着自己。有沒有辦法縮短這些代碼並將它們合併爲一個聲明？代碼的作用是獲取一個選中的單選按鈕的值，並在具有某個類的潛水中顯示該值。我有多組這樣的單選按鈕（具有不同的名稱），以及用戶何時做出選擇，用戶選擇以div顯示。代碼有效，但如果可能，我想縮短代碼。代碼看起來多餘。縮短jQuery代碼

下面是代碼：

// To show default Selection 
    $(".designLayout").html($('input[name="designLayout"]:checked').val()); 
    // Change on Click 
    $('input[name="designLayout"]').on('click change', function() { 
     $(".designLayout").html(($(this).val())); 
    }); 

    // To show default Selection 
    $(".printRun").html($('input[name="printRun"]:checked').val()); 
    // Change on Click 
    $('input[name="printRun"]').on('click change', function() { 
     $(".printRun").html(($(this).val())); 
    }); 

    // To show default Selection 
    $(".printedSides").html($('input[name="printedSides"]:checked').val()); 
    // Change on Click 
    $('input[name="printedSides"]').on('click change', function() { 
     $(".printedSides").html(($(this).val())); 
    }); 

    // To show default Selection 
    $(".finishedSize").html($('input[name="finishedSize"]:checked').val()); 
    // Change on Click 
    $('input[name="finishedSize"]').on('click change', function() { 
     $(".finishedSize").html(($(this).val())); 
    }); 

    // To show default Selection 
    $(".paperWeight").html($('input[name="paperWeight"]:checked').val()); 
    // Change on Click 
    $('input[name="paperWeight"]').on('click change', function() { 
     $(".paperWeight").html(($(this).val())); 
    }); 

    // To show default Selection 
    $(".refining").html($('input[name="refining"]:checked').val()); 
    // Change on Click 
    $('input[name="refining"]').on('click change', function() { 
     $(".refining").html(($(this).val())); 
    }); 

    // To show default Selection 
    $(".processing").html($('input[name="processing"]:checked').val()); 
    // Change on Click 
    $('input[name="processing"]').on('click change', function() { 
     $(".processing").html(($(this).val())); 
    }); 

    // To show default Selection 
    $(".deliveryMethod").html($('input[name="deliveryMethod"]:checked').val()); 
    // Change on Click 
    $('input[name="deliveryMethod"]').on('click change', function() { 
     $(".deliveryMethod").html(($(this).val())); 
    });

來源

2016-08-04 Innocent Monareng

將字符串連接組合起來。 –

我認爲你應該發佈http://codereview.stackexchange.com/ –

我投票結束這個問題作爲題外話，因爲這應該屬於** [代碼評論]（http：//codereview.stackexchange。 com /'）** –

由於您對name和class使用相同的字符串，您可以使用Multiple Selector (「selector1, selector2, selectorN」)綁定change事件處理程序。

//Use multiple selectors 
$('input[name="paperWeight"], input[name="finishedSize"]').on('change', function() { 
    if(this.checked){ //Check the element is checked 
     var name = $(this).attr('name'); //Get name attribute 
     $("." + name).html(this.value); //set the value on desired html element 
    }   
}).change(); //trigger on page load to set the default value

來源

2016-08-04 09:55:18 Satpal

謝謝。這工作。 –

只寫函數這樣

function sample(name) { 
$("."+name).html($('input[name='+name+']:checked').val()); 
    // Change on Click 
    $('input[name='+name+']').on('click change', function() { 
     $("."+name).html(($(this).val())); 
    }); 
} 

sample('designLayout'); 
sample('printRun');

你繼續這樣。

來源

2016-08-04 09:51:10

縮短jQuery代碼

回答

相關問題