Question

如何将这两个（或更多）相同的函数合二为一 - 来压缩JS数据 - 它们是相同的函数但不同的css。这是为了突出显示悬停特定li上的不同img - 一个li为一个img

$(".class1").mouseenter(function () {
    $(".class2").addClass("highlight");
});

$(".class3").mouseenter(function () {
    $(".class4").addClass("highlight");
});

Answer 1

为所有感兴趣的元素添加一个公共类，然后在公共类上绑定事件。
使用data-*属性存储要添加类highlight的元素的选择器。
使用data属性上的选择器对其执行操作

使用Javascript：

$('.myClass').mouseenter(function() {
    $($(this).data('target')).addClass('highlight');
});

在HTML中，添加data-target属性。

<div data-target=".class2" class="class1 myClass">Lorem</div>
<!-- ^^^^^^^^^^^^^^^^^^^^^               ^^^^^^^          -->
<div data-target=".class3" class="class2 myClass">Ipsum</div>

Answer 2

您可以使用以下内容，但我建议您重新考虑您的CSS（类） - @Tushar建议的结构！

[['.class1', '.class2'], ['.class3', '.class4']].forEach(function(value) {
    $(value[0]).mouseenter(function(event) {
        $(value[1]).addClass("highlight"); 
    });
});

Answer 3

通过一行@Tushar的回答，您可以添加多个class，其,个分隔值如下：

为您的元素添加data-*（* - ＆gt;任意值）to，如下所示：

<div data-to=".class2" class="class1">First Class</div>
<div data-to=".class3" class="class2">Second Class</div>

然后用JS：

$(".class1,.class2").mouseenter(function(){
    $($(this).data('to')).addClass("highlight"); 
});

如何在一个JS函数中编写许多函数

3 个答案: