如何重构JQuery代码，使其遵循DRY原则

Question

请参阅。我在这里有以下html <ul>-<li>列表。

<ul class="nav">
 <li class="active"><a href="#" id="home">Home</a></li> 
 <li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown" id="about-us">About Us<b class="caret"></b></a>
    <ul class="dropdown-menu">
      <li><a href="#">Who we are?</a></li>
      <li><a href="#">What we stand for?</a></li>
    </ul>
 </li>
 <li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown" id="campaigns">Campaigns<b class="caret"></b></a>
    <ul class="dropdown-menu">
      <li><a href="#">Get Involved</a></li>
    </ul>
  </li>
  <li><a href="#" id="news">News</a></li>
  <li><a href="#" id="donate">Donate</a></li>
</ul>

然后我有下面的jquery代码

$("#about-us").click(function(){
   $("ul.nav").children("li").children("a").css("background-color", "#0E0E0E");
   $(this).css("background-color","#47F514");
});
$("#campaigns").click(function(){
   $("ul.nav").children("li").children("a").css("background-color", "#0E0E0E");
   $(this).css("background-color","#F2720A");
});
$("#news").click(function(){
   $("ul.nav").children("li").children("a").css("background-color", "#0E0E0E");
   $(this).css("background-color","#0A76F2");
});
$("#donate").click(function(){
   $("ul.nav").children("li").children("a").css("background-color", "#0E0E0E");
   $(this).css("background-color","#F7A116");
});

我可以看到$("ul.nav").children("li").children("a").css("background-color", "#0E0E0E")行在许多行中重复。所以我当然可以把它取出来，在每次点击事件中放一个新函数，多次进行相同的调用。

我应该做些什么来重构它？

Answer 1

您可以这样做：

var colors_array_by_id = { "about-us" : "#47F514", "campaigns" : "#F2720A", "news" : "#0A76F2", "donate" : "#F7A116" };
$("#about-us, #campaigns, #news, #donate").click(function(){
   $("ul.nav > li > a").css("background-color", "#0E0E0E");
   $(this).css("background-color", colors_array_by_id[$(this).attr('id')]);
});

唯一会更改的是取决于单击的元素的颜色。所以，我在这里创建了一个包含id颜色对的关联数组。

Answer 2

以下是我的操作方法-

<ul class="nav">
 <li class="active"><a href="#" id="home">Home</a></li> 
 <li class="dropdown">
    <a href="#" class="dropdown-toggle navLinks" data-toggle="dropdown" data-bgcolor="#47F514" id="about-us">About Us<b class="caret"></b></a>
    <ul class="dropdown-menu">
      <li><a href="#">Who we are?</a></li>
      <li><a href="#">What we stand for?</a></li>
    </ul>
 </li>
 <li class="dropdown">
    <a href="#" class="dropdown-toggle navLinks" data-toggle="dropdown"  data-bgcolor="#F2720A"  id="campaigns">Campaigns<b class="caret"></b></a>
    <ul class="dropdown-menu">
      <li><a href="#">Get Involved</a></li>
    </ul>
  </li>
  <li><a href="#" id="news" class="navLinks" data-bgcolor="#0A76F2" >News</a></li>
  <li><a href="#" id="donate" class="navLinks" data-bgcolor="#F7A116" >Donate</a></li>
</ul>

我为链接添加了一个名为databgcolor的数据属性，它具有颜色值。接下来，我将一个单击处理程序附加到所有链接。

$("#about-us, #campaigns, #news, #donate").click(function(){
   $("ul.nav").children("li").children("a").css("background-color", "#0E0E0E");
   $(this).css("background-color", $(this).attr("data-bgcolor"));
});

Answer 3

，你可以这么做

在css中，

.myClass{ background-color: #OEOEOE;}

有载，

var elm = $("ul.nav").children("li").children("a");

然后，

$("#about-us, #campaigns, #news, #donate").click(function(){
   $this = $(this);
   elm.addClass("myClass");
   $this.css("background-color", $this.data("bgcolor"));
});

您可以使用.data()而不是.attr()。