1

我已经搜索和问题选项卡，我发现之前已经问过 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);
});
4

3 回答 3

3

如果没有看到您的 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"));
});
于 2013-01-31T12:08:34.003 回答
0

首先定义一个具有更通用版本的功能的函数。唯一的区别是要为 div 着色的选择器，因此将其作为参数取出，您会得到

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

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

这将允许您将代码更改为

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

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

然后就像下面这样使用它

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

顺便说一句，可以使用伪选择器选择第一、第二和最后一个，因此通常不需要基于排序的类

于 2013-01-31T12:32:40.083 回答
-2

至少有两种方式：

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

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

2）有一个功能做的事情，不要重复自己（干）

 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();
 });
于 2013-01-31T12:06:44.507 回答