Question

我有这样的代码

$(".class1 .class2").on('click', function(){
 //Do something        
});

我正在尝试使用变量：

var1=".class1";
var2=".class2"

$(var1 var2).on('click', function(){
   //Do something        
});

我看到var1和var2被设置为正确的值，但每次我尝试使用2个变量作为选择器时它都会失败。当我保持点击触发器不变并在代码中的其他位置单独使用var1或var2（仅var1或var2但不在相同的选择器列表中）时，它可以正常工作。有什么提示吗？

我想我使用var3连接var1和var2，但我正在尝试减少另一个变量。

Answer 1

你错过了空间，没有它，它变成.class1.class2，这意味着元素必须有两个类，而不是第一个的后代等。

var1 = ".class1";
var2 = ".class2";

$(var1 + ' ' + var2).on('click', function(){
   //Do something        
});

另一种选择是find()

$(var1).find(var2).on(...

正好$(var1 var2)与var fail = var1 var2;相同，这是语法错误。

Answer 2

您的示例代码存在JavaScript语法错误（如果您打算将它们连接起来，则var1和var2之间应该有一个加号）。但是，这会产生一个选择器“.class1.class2”，这不是你想要的 - 这会找到一个具有两个类的元素，而不是具有class1或class2的元素。

因此，首先，您需要一个加号来修复语法错误。但是，您需要在类名之间使用逗号来选择正确的元素。

var1=".class1";
var2=".class2"

// Select ".class1,.class2" (either class1 or class2)
$(var1 + ',' + var2).on('click', function(){
   //Do something        
});

Answer 3

另一种选择是使用jQuery对象作为变量。这样可以避免必须声明第三个变量，这非常简单，但是如果你真的想要，那就有办法了。

这假设您正在尝试将该函数应用于任何具有任一类的元素，这不是您现有的代码示例所显示的（$(".class1 .class2").on），但对我而言，这似乎就是您实际上要求。

var var1 = $('.clickable');
var var2 = $('.anotherClass');

var1.add(var2).on('click', function() {
  console.log('button clicked!');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="clickable">Click 1</button>
<button class="anotherClass">Click 2</button>

jquery选择器中的多个变量

3 个答案: