Question

我是jQuery的新手，下面的代码一遍又一遍地重复着。有没有办法可以缩短这些代码并将它们合并为一个陈述？代码的作用是获取已检查单选按钮的值，并在某个类的潜水中显示该值。我有多组这样的单选按钮（具有不同的名称），当用户进行选择时，用户选择显示在div中。该代码有效，但我想尽可能缩短代码。代码看起来多余。

以下是代码：

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

Answer 1

只需写下这样的功能

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');

你继续这样做。

Answer 2

当您对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

缩短jQuery代码

2 个答案: