1

選択後に結果を返すドロップダウン メニューがあります。その後、ユーザーはリンクをクリックしてドロップダウン メニューを複製し、さらに結果を返す別の選択肢を選択できます。結果 div の構造は次のとおりです。

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

ユーザーにliをクリックして背景色を変更してもらいたいです。ユーザーは、一度に 1 つの 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 の背景を変更できるようにしたいだけでなく、結果の 2 番目のセットの背景も変更できるようにします。したがって、結果の各セットは、その特定の 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 を指定すると、問題のリストにのみ影響するようになります。少し無意味に見えますが、and を使用parentしfindたので、セレクターにクラスまたは ID を指定する場合にのみセレクターを変更するul必要があり、それでも機能します。

于 2013-01-30T16:44:06.497 に答える