在多個子選擇器on（）Javascript

Question

我在jQuery中使用on（）方法，我想知道是否可以縮短我的代碼，因爲我只是一遍又一遍地使用代碼，但使用不同的子選擇器。 是否可以在一個on()中使用多個子選擇器？

這是一個示例代碼，我有很多這樣的代碼。

$(document.body).on('change', 'input[name*="create"]', function() { 
    var $class = $(this).attr('class'); 
    if (!$(this).is(':checked')) { //not checked 
    $('input[name*="' + $class + '_selectall"]').attr({ 
     'checked': false 
    }); 
    } else { 
    $('input[name*="' + $class + '_selectall"]').attr({ 
     'checked': true 
    }); 
    } 
}); 

$(document.body).on('change', 'input[name*="compute"]', function() { 
    var $class = $(this).attr('class'); 
    if (!$(this).is(':checked')) { //not checked 
    $('input[name*="' + $class + '_selectall"]').attr({ 
     'checked': false 
    }); 
    } else { 
    $('input[name*="' + $class + '_selectall"]').attr({ 
     'checked': true 
    }); 
    } 
}); 

$(document.body).on('change', 'input[name*="print"]', function() { 
    var $class = $(this).attr('class'); 
    if (!$(this).is(':checked')) { //not checked 
    $('input[name*="' + $class + '_selectall"]').attr({ 
     'checked': false 
    }); 
    } else { 
    $('input[name*="' + $class + '_selectall"]').attr({ 
     'checked': true 
    }); 
    } 
}); 

我想知道是否有可能使用多個'input[name*="create"]'在一個on()，這樣我就不必重複了。

Answer 1

使用Multiple Selector (「selector1, selector2, selectorN」)

$(document.body).on('change', 'input[name*="create"],input[name*="print"], input[name*="compute"]', function() { 
    ... 
}); 

Answer 2

如果你打算使用在多個地方同樣的功能線，起初它申報單一的功能名稱。然後，只要你需要，你可以打電話給它。

對於實現部分，您可以使用css選擇器將一個事件實現爲多個類。 （如下圖）

function dotheAction(e) { 
 
    var $class = $(e).attr('class'); 
 
    if (!$(this).is(':checked')) { //not checked 
 
    $('input[name*="' + $class + '_selectall"]').attr({ 
 
     'checked': false 
 
    }); 
 
    } else { 
 
    $('input[name*="' + $class + '_selectall"]').attr({ 
 
     'checked': true 
 
    }); 
 
    } 
 
}; 
 

 
$(document.body).on('change', 'input[name*="create"], input[name*="compute"], input[name*="print"]', dotheAction(this));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 3

您可以創建活動，重視事件的DOM元素，並應用一個有用的回調函數。

function attachEvent(eventName, selector, callback) { 
 
     $(document).on(eventName, selector, callback); 
 
    } 
 

 
    var changeCallback = function() { 
 
      var className = $(this).attr('class'); 
 
      
 
      console.info(className); 
 
      
 
      if (!$(this).is(':checked')) { //not checked 
 
       $('input[name*="' + className + '_selectall"]').attr({ 
 
        'checked': false 
 
       }); 
 
      } else { 
 
       $('input[name*="' + className + '_selectall"]').attr({ 
 
        'checked': true 
 
       }); 
 
      } 
 
     }; 
 

 
    attachEvent('change', 'input[name*="create"],input[name*="compute"],input[name*="print"]', changeCallback);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input name="create" class="create" placeholder="create" type="text" /> 
 
<input name="compute" class="compute" placeholder="compute" type="text" /> 
 
<input name="print" class="print" placeholder="print" type="text" />

Answer 4

決不目標參考的其他元件通過使用調用者的className。有一天，你會添加一個樣式類到你的元素，你的JS會打破，讓你想知道。

相反使用data-*屬性參考：

<input type="checkbox" data-target="create"> Create<br> 
<input type="checkbox" data-target="compute"> Compute <br> 
<input type="checkbox" data-target="print"> Print<br> 

考慮到即：創建以上將針對所有

<input type="checkbox" name="create_selectall"> 

元素，比這是你所需要的。
真的。

$("body").on('change', 'input[data-target]', function() { 
    $('input[name*="'+ this.dataset.target +'_selectall"]').prop({checked: !this.checked}); 
});