0

クリックイベントにバインドされた次の行があります。

$(this).parents(".addonoptions").children().removeClass("highlight");

親の子から「ハイライト」クラスを削除する必要があります。しかし、それは何もしていません。

これを次のように変更すると:

$(this).parents(".addonoptions").children().addClass("highlight");

次に、ハイライト クラスがすべての子に正常に追加されます。同様に、「removeClass」を「hide()」に変更すると、選択した要素が非表示になるので、正しい要素が選択されていることがわかります。removeClass が機能しないことに関する他の多くの質問と回答を読みましたが、このコンテキストではどの回答も機能していないようです。

これは、HTML がどのように見えるかの基本的な例で、「clickme」クラスが上記のイベントに関連付けられています。

<div class="addonoptions">
<div><p class="clickme">Click to remove highlights</p></div>
<div class="highlight"><p class="clickme">Click to remove highlights</p></div>
</div>
4

3 に答える 3

1

children直接の子ノードのみを検索します (この場合、タグ<div>の代わりに s を使用します。 <p>find

実際の例 - http://jsfiddle.net/sKz6y/

于 2012-06-28T01:51:46.850 に答える
1

$(this)が<p>タグの場合、呼び出しchildren()は<div>s のセットを返します。findjQuery のメソッドを使用する必要があります。

試す：

$(this).parents(".addonoptions").find('p').removeClass("highlight");

http://api.jquery.com/children/

http://api.jquery.com/find/

<div class="addonoptions">
    <div>
        <p class="clickme">Click to remove highlights</p>
    </div>
    <div class="highlight">
        <p class="clickme">Click to remove highlights</p>
    </div>
</div>​

$('.clickme').on('click', function(){
    $(this).parents('.addonoptions').children().removeClass('highlight');
    $(this).parent().addClass('highlight');
});​

http://jsfiddle.net/E4K7P/

于 2012-06-28T01:52:41.737 に答える
1

クラス自体で removeClass を呼び出すだけで、削除を非常に単純化できます。

デモ: http://jsfiddle.net/hwxj9/

$('.clickme').click(function() {
    /* remove highlight class*/
    $('div.highlight').removeClass('highlight');
    /* or if class exists in other parts of page
       $(this).closest('.addonoptions').find('div.highlight').removeClass('highlight');

     */
    /* highlight parent of p */
    $(this).parent().addClass('highlight');

})
于 2012-06-28T02:12:47.393 に答える