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选择器将一个事件实现到多个类。（下同）

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

从不使用来电者的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>

考虑到上面的： create 将针对所有

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

元素，这就是你所需要的真

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

Answer 4

您可以创建一个函数，将事件附加到dom中的元素并应用所需的回调。

＆＃13;

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

＆＃13;

<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" />

＆＃13;

on（）Javascript中的多个子选择器

4 个答案: