jQuery选择器与变量相乘

Question

jQuery允许这样的乘法选择器：

$(document).on('change', '#popfrom, #poptill', function()

但是我的选择器来自这样的变量：

$(document).on('change', adddatedropper, function()

有人可以告诉我如何从变量中添加第二个选择器吗？我是否需要从两个变量中创建一个字符串，还是有另一种方法？

Answer 1

第二个选择器需要使用字符串连接

$(document).on('change', '#popfrom, #'+ adddatedropper, function()

或者您可以使用add添加两个元素

$(adddatedropper).add(addtimedropper).

var adddatedropper ="#div1";
var addtimedropper ="#div2";
var both = adddatedropper +' , ' + addtimedropper;

$(document).on("click",both,function() {
    alert("click bound to document listening");
});


$(adddatedropper).add(addtimedropper).on('click', function() {
  alert("click bound to document listening");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id='div1'> div 1</div>
<div  id='div2'>div 2</div>

Answer 2

多个jQuery选择器作为变量

假设每个变量都是有效的jQuery / CSS选择器，则可以声明这些变量的数组，然后使用join()方法。

 var v123 = [v1, v2, v3].join(', ');
 $(document).on('change', v123, callback);

除关键事件外，委派给document似乎是多余且冗长的。 演示2 将change事件直接委派给选择器：

 var v123 = [v1, v2, v3].join(', ');
 $(v123).on('change', callback);

当然，结果与演示1 相同，在IMO上它不那么冗长且更容易。

---

演示1

$(document).on('change', RCS, viewData);

var R = ':radio';
var C = ':checkbox';
var S = 'select';
var RCS = [R, C, S].join(', ');

$(document).on('change', RCS, viewData);

function viewData(e) {
  $('output').val($(this).val());
}

fieldset {
  width: fit-content;
  display: inline-block;
  min-height: 20px;
  float: left;
}

output {
  display: block;
  min-width: 25px;
  margin: auto;
  text-align: center;
}

<fieldset>
  <input type='radio' name='rad' value='1'>1
  <input type='radio' name='rad' value='3'>3
  <input type='radio' name='rad' value='5'>5
</fieldset>

<fieldset>
  <input type='checkbox' value='2'>2
  <input type='checkbox' value='4'>4
  <input type='checkbox' value='6'>6
</fieldset>

<fieldset>
  <select>
    <option>A</option>
    <option>B</option>
    <option>C</option>
  </select>
</fieldset>

<fieldset>
  <output></output>
</fieldset>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

---

演示2

$(RCS).on('change', viewData);

var R = ':radio';
var C = ':checkbox';
var S = 'select';
var RCS = [R, C, S].join(', ');

$(RCS).on('change', viewData);

function viewData(e) {
  $('output').val($(this).val());
}

fieldset {
  width: fit-content;
  display: inline-block;
  min-height: 20px;
  float: left;
}

output {
  display: block;
  min-width: 25px;
  margin: auto;
  text-align: center;
}

<fieldset>
  <input type='radio' name='rad' value='1'>1
  <input type='radio' name='rad' value='3'>3
  <input type='radio' name='rad' value='5'>5
</fieldset>

<fieldset>
  <input type='checkbox' value='2'>2
  <input type='checkbox' value='4'>4
  <input type='checkbox' value='6'>6
</fieldset>

<fieldset>
  <select>
    <option>A</option>
    <option>B</option>
    <option>C</option>
  </select>
</fieldset>

<fieldset>
  <output></output>
</fieldset>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 3

您可以尝试这样

$(document).on('change', '#'+$(adddatedropper).attr('id')+', #'+ $(addtimedropper).attr('id'), function()