Question

我已经搜索了问题标签，我发现之前已经问过jQuery重复代码问题，但我仍然无法理解如何将其应用到我的具体问题中。

下面是一个简单的代码，可以将框中的文本更改为红色，蓝色和黑色，此框中有3个。如何最小化此代码以避免重复，谢谢。

 $("div.box1").click(function () {
    colour=$(this).css("background-color");
    $("div.first").css("color", colour);
});

 $("div.box2").click(function () {
    colour=$(this).css("background-color");
    $("div.second").css("color", colour);
});

 $("div.box3").click(function () {
    colour=$(this).css("background-color");
    $("div.last").css("color", colour);
});

Answer 1

如果不了解您的HTML，就很难理解这些不同元素之间的关系。

但是，您可以做的一件事是将颜色更新为HTML5属性的元素的类名存储起来。例如：

<div class="box box1" data-otherdiv="first"></div>
<div class="box box2" data-otherdiv="second"></div>
<div class="box box3" data-otherdiv="third"></div>

然后你可以简单地使用一个函数：

$("div.box").click(function () {
    var $this = $(this); //creating a local "$this" object prevents multiple $(this) calls
    $("div." + $this.data("otherdiv")).css("color", $this.css("background-color"));
});

Answer 2

首先定义一个具有更通用版本功能的函数。唯一的区别是div的selctor是彩色的，所以把它当作参数拿出来

function setColor (divSelector) {
    var colour=$(this).css("background-color");
    $(divSelector).css("color", colour);
});

然后你会像这样使用它

$("div.box1").click(function () {
    setColor("div.first");
});
//...and so on for the following boxes

你可能比这更聪明，并根据this选择divSelector。您可以使用jQuery .data()来连接div。与使用data-*相比，jQuerys数据也适用于旧浏览器

这将允许您将代码更改为

function setColor () {
    var self = $(this);
    var colour=self.css("background-color");
    $("div." + self.data('toBeColoured')).css("color", colour);
});

如果您只需要支持HTML5浏览器，请使用data-*

然后只需使用它如下

$("div.box1").data('toBeColoured','first').click(setColor);
$("div.box2").data('toBeColoured','second').click(setColor);
$("div.box3").data('toBeColoured','last').click(setColor);

作为第一个，第二个和最后一个可以使用伪选择器进行选择，因此通常不需要基于排序的类

Answer 3

至少有两种方式：

1）使用选择器引擎选择多个元素并对其应用函数：

 $("div.box1, div.box2, div.box").click(function () {
    colour=$(this).css("background-color");
    $("div.first").css("color", colour);
});

2）有一个功能可以完成任务并且不要重复自己（ DRY ）

 function applyColor() {
   colour=$(this).css("background-color");
   $("div.second").css("color", colour);
 }
 $("div.box1").click(function () {
   applyColor();
 });

 $("div.box2").click(function () {
   applyColor();
 });

 $("div.box3").click(function () {
   applyColor();
 });

如何避免编写jQuery重复代码

3 个答案: