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

Question

我如何将这两个（或更多）相同的函数写成一个 - 压缩 JS 数据 - 它们是相同的函数但不同 css。它用于在悬停特定的 li 上突出显示不同的 imgs - 一个 li 对应一个 img

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

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

Answer 1

向所有感兴趣的元素添加一个公共 class，然后在公共 class 上绑定事件。
使用 data-* 属性存储要添加 class 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 (class) - 按照@Tushar 建议的结构！

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

Answer 3

按照@Tushar 的单行回答，您可以添加多个 class，并使用 , 分隔值，如下所示：

向您的元素添加 data-*（*-> 任何值）说 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 函数中编写多个函数

How to write many functions in one JS function

javascript

css

syntax

jquery