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

【问题标题】：How to write many functions in one JS function如何在一个JS函数中编写多个函数
【发布时间】：2015-08-24 09:23:44
【问题描述】：

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

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

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

【问题讨论】：

标签： javascript jquery css syntax

【解决方案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>

【讨论】：

Thx，tihs 是一个很好的方法，但我的意思是如何重写以前的 js，只是为了让它更简单，而不需要更改 html 代码，是否可以这样做？跨度>
@Rudi 我也添加了JS的代码，你只需要使用普通类绑定一次事件

【解决方案2】：

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

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

【讨论】：

【解决方案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"); 
});

【讨论】：