如何重构此 JQuery 代码以使其遵循 DRY 原则答案

【问题标题】：How to refactor this JQuery code so that it follows the DRY principle如何重构此 JQuery 代码以使其遵循 DRY 原则
【发布时间】：2013-11-18 09:26:55
【问题描述】：

看。我这里有以下 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") 行在很多行中重复出现。所以我当然可以把它拿出来并在每个点击事件中添加一个新函数来多次调用。

我应该怎么做才能重构这个？

【问题讨论】：

标签： javascript jquery html css

【解决方案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-color 对的关联数组。

【讨论】：

+1。 $("ul.nav > li > a").click(... 可以省去列出 ID 的麻烦。（并且$("ul.nav > li > a") 可以被缓存在函数内部使用。）
@nnnnnn 如何“省去列出 ids”？
@wared - 使用"ul.nav > li > a" 而不是"#about-us, #campaigns, #news, #donate"。您仍然可以使用列出 id 的 colors_array_by_id，但是如果添加了另一个菜单项，则只需将其 id 添加到 JS 中的一个位置。
感谢大家的意见。他们是好主意！当我有机会时，我会给他们一个机会。只需编写几行代码即可获得相同的结果，这真是太棒了。甚至还可以提高浏览器的性能。
$('ul.nav').on('click', 'li > a', function () { ... }) 之类的东西可能会更好，这样你就只有一个监听器，它会更干净一些，然后为每个链接添加一个单独的监听器。

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

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

$("#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"));
});

【讨论】：

如果你把它改成$("ul.nav > li > a").click(... JS 根本不需要知道任何id。

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

【讨论】：