Question

我有一个下拉菜单，在选择后返回结果。然后，用户可以单击链接，克隆下拉菜单，然后选择将返回更多结果的其他选择。结果div的结构如下：

<ul>
  <li class="red">
    <span> some html content</span>
  </li>
  <li class="red">
    <span> some html content</span>
  </li>
</ul>

我希望用户点击li并更改背景颜色。用户应该只能一次更改一个li的颜色。我可以使用以下方法完成第一部分：

$("li.red, li.blue").live("click",function() {
      var $this, c;
      $this = $(this);
      c = $this.hasClass("red")
                ? {us: "blue", them: "red" }
                : {us: "red", them: "blue" };
       $("li." + c.us).removeClass(c.us).addClass(c.them);
       $this.removeClass(c.them).addClass(c.us);
    });

问题在于，当用户添加另一个选择（并且使用jquery克隆前一个下拉列表），并单击该结果div中的li时，将取消选择先前的选择。我希望用户能够为第一组结果更改li的背景，以及更改第二组结果的背景。因此，每组结果都能够仅在特定的ul之间切换背景颜色。

非常感谢任何帮助！

Answer 1

尝试使用on()代替live()：

$(document).on("click","li.red, li.blue",function() {
      ...
});

Answer 2

试试这个......

$("ul").on("click", "li", function() {
    $(this).parent().find("li").removeClass("red").addClass("blue");
    $(this).toggleClass("red").toggleClass("blue");
});

jsFiddle示例...... http://jsfiddle.net/L34pT/3/

给ul一个类名或ID会确保它只影响有问题的列表。它看起来有点无意义，但我使用了parent和find，因此您只需更改ul选择器，如果您确实给它一个类或ID，它仍然有用。

使用克隆的div切换类

2 个答案: