1

以前にクリックした段落/要素にアクセスしようとしています。ユーザーが段落をクリックすると、bg-colorが白から青に変わります。これがユーザーにとって視覚的に意味することは、クリックしたPが選択されていることです。別の段落をクリックすると、前に選択した段落のbg-colorが青から白に戻ります。

以前にクリックした段落を選択する方法はありますか？できれば、クラスを追加および削除せずに。明らかに、以下の私のコードは機能しませんが、答えがどのように機能すると思うかを説明しましたか？

$('p').bind('click', function () {
   //checks if an item was previously selected, if so, sets background back to white
   $(previouslySelected).css({'backgroundColor':'white'})

   //change the current background blue, then store this item for the next click
   $(this).css({'backgroundColor':'blue'})
   var previouslySelected = $(this)
})
4

2 に答える 2

2

クラスがない場合は、クリックハンドラー関数のスコープ外に変数を格納する必要があります。

// on page load + wrapped in another function to avoid polluting global namespace
$(document).ready(function() {

    var previouslySelected
    $('p').bind('click', function () {
       //checks if an item was previously selected, if so, sets background back to white
       $(previouslySelected).css({'backgroundColor':'white'})

       //change the current background blue, then store this item for the next click
       $(this).css({'backgroundColor':'blue'})
       previouslySelected = $(this)
    })

})

ただし、クラスの追加ははるかに簡単です。

$('p').bind('click', function () {
    $("p.selected").removeClass("selected")
   $(this).addClass("selected")
})
于 2011-03-10T06:25:53.457 に答える
0

css

.highlight
{
background-color:yellow;
}

html

<p class="highlightable"></p>
<p class="highlightable"></p>
<p class="highlightable"></p>

Javascript

jQuery(function(){

  jQuery('.highlightable').bind('click',function(){
           var elm=jQuery(this);
           if(elm.hasClass('highlight'))
           {
              elm.removeClass('highlight')
           }
           else
           { 
                 jQuery('.highlight').removeClass('highlight');
                 elm.addClass('highlight');
           }
   });
});

デモ

于 2011-03-10T06:24:19.543 に答える