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-color couple的关联数组。

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>

我已经在名为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"));
});

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()。

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

3 个答案: