javascript - 使用克隆的 div 切换类

Question

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

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

我希望用户单击一个 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

试试这个...

$("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，它仍然有效。