Question

我不想重复我的代码，所以我想弄清楚如何处理多个元素上的点击事件：

$(document).ready(function() {
    var realStateBtn = $('#real-estate-center').parent();
    var link = $('#real-estate-center > .linkwidth');
    realStateBtn.css('zIndex', 9999);
    realStateBtn.click(function() {
        console.log('TRIGGERED');
        window.location.href='http://realestatecenter.bankofamerica.com/';
    });

    link.click(function() {
        window.location.href="http://realestatecenter.bankofamerica.com/";
    });
});

当你看到变量realStateBtn和link带你到同一个地方/应用了相同的功能时，我该怎么办才能将相同的代码放到一个函数中？

我知道我可以这样做：

$('.class1, class2').click(...)

但在这种情况下我有这些元素：

$('#real-estate-center').parent();

$('#real-estate-center > .linkwidth');

建议？

Answer 1

您可以使用.add()方法组合jQuery对象。

realStatebtn.add(link).click(function() {
    console.log('TRIGGERED');
    window.location.href='http://realestatecenter.bankofamerica.com/';
}

Answer 2

正如您所说：将代码移动到单个函数中：

function move() {
   window.location.href='http://realestatecenter.bankofamerica.com/';
}

realStateBtn.click(move);
link.click(move);

这是一个显示概念的jsfiddle：https://jsfiddle.net/b0ynfnmn/

Answer 3

您可以添加一个公共类并在此类上侦听click事件：

// Store the elements you want to an array
var elems = [];
elem.push(realStateBtn);
elem.push(link);
// You can add more elements ...

现在迭代数组并添加相同的类：

for(var elem in elems) {
   elems[elem].addClass('my-element');
}

添加适当的事件监听器（使用事件委托以便工作）：

// Add event listener using event delegation
$(document).on('click', '.my-element', function() {
   window.location.href="http://realestatecenter.bankofamerica.com/";
});

多个元素的相同点击事件，具体情况

3 个答案: