1

我有一个下拉菜单，可以在选择后返回结果。然后，用户可以单击一个链接，克隆下拉菜单，然后选择另一个将返回更多结果的选项。结果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 之间切换背景颜色。

任何帮助深表感谢！

4

2 回答 2

1

尝试使用on()而不是live()：

$(document).on("click","li.red, li.blue",function() {
      ...
});
于 2013-01-30T16:42:32.123 回答
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，所以如果你给它一个类或 ID，find你只需要更改选择器，它仍然可以工作。ul

于 2013-01-30T16:44:06.497 回答