jqueryで選択したaspボタンのCSSクラスを保持する方法は？

Question

ページには10個のASPボタンのボタンがあります。私はボタンマウスのホバーとマウスの離脱に影響するCSSクラスを使用しています。私が直面している問題は、ボタンをクリックすると、クリックされたボタンにCSSクラスを適用して保持したいのですが、そのボタンをクリックするとクラスが削除されます。実際には、選択された（クリックされた）ボタンのクラスの変更を無効にする必要があります。だから私が5つのボタンbtn1, btn2, btn3, btn4, btn5を持っていて、私の選択したボタンがbtn3なら、btn3の上に置いてこのbtn3のままにしておけば、そのCSSクラスを失ってはならない。

これは、CSSクラスを適用するための私のコードです：

<script src="jquery-1.6.2.js" type="text/javascript"></script> 
    <script type="text/javascript"> 

     $(document).ready(function() { 

      // mouse hover 
      $("[id^='MangoPager_btn']").mouseenter(mouseenterfunction); 
      // mouse leave 
      $("[id^='MangoPager_btn']").mouseleave(mouseleavefunction);   

     }); 

     function mouseleavefunction() { 

      $(this).removeClass("pagerbtnMouseEnter").addClass("buttonclass"); 
     } 

     function mouseenterfunction() { 

      $(this).addClass("pagerbtnMouseEnter"); 
     } 

    </script> 

と、ボタンがクリックされたときに私が使用しているコード：

 private void SetSelectedButtonStyle() 
      { 
ResetCss(): 
       //selectedItemClass 
       Button selectedButton = FindButtonWithText(_currentPageIndex.ToString()); 
       if (selectedButton != null) 
       { 
        selectedButton.CssClass = "pagerbtnMouseEnter"; 
       } 
      } 

private void ResetCss() 
     {    

      for (int i = 1; i <= MAX_PAGE_SIZE; i++) 
      { 
       Button btn = (Button)FindControl(string.Format("btn{0}", i)); 
       btn.CssClass = "buttonclass"; 
      } 
     } 

Iが変化から選択されたボタンを防ぐために持っています私がマウスを動かしたりマウスを離したりするときのCSSクラス。

Answer 1

あなたのボタンが3つの異なる状態を持っていますか？そのようにするには、押された状態のための別のcssクラスが必要です。そして、あなたのホバリング関数で、あなたのボタンが選択されたクラスを持っているかどうかを確認し、それから何もしません。

しかし、ホバリング状態はCSSだけで可能ですか？

.myClass 
{ 
    background-color : blue; 
} 

.myClass:hover 
{ 
    background-color : red; 
} 

これは、マウスカーソルを置くたびにmyclass要素の背景色を変更します。

だから何を行うことができますすることのMouseEnter/mouseleave

のためのすべてのあなたのjqueryのコードがクリックされた状態のための新しいクラスを作成、削除です。

.buttonClass 
{ 
    // Your button style 
} 
.buttonClass:hover 
{ 
    // Your mousein button style 
} 
.buttonClicked 
{ 
    // Your selected/clicked button style 
} 

そして、あなたのasp.netページ上ジュストbuttonClickedクラスでクリックされたボタンの.buttonクラスを置き換える:)

を

Answer 2

さてあなたがオブジェクトにクリックされたボタンのID救うことができる：

var clickedButtons = {}; 

$("[id^='MangoPager_btn']").click(function(){ 
    clickedButtons[this.id] = true; 
}); 

が次にボタンがクリックされたかどうかを確認するためにmouseleaveを変更し、それがクリックされていない場合にのみ、クラスを削除します：

function mouseleavefunction() { 
     if (clickedButtons[this.id] !== true){ 
      $(this).removeClass("pagerbtnMouseEnter").addClass("buttonclass"); 
      } 

    } 

Answer 3

この作品のようなものはありますか？ノーマル - - ホバリング - 選択

あなたが唯一の2つのクラスを持っているのはなぜ ：

$(document).ready(function(){ 
    $("[id^='MangoPager_btn']").live(function() { 
     click: function() { 
      $(this).addClass("clickClass"); 
     }, 
     mouseover: function() { 
      $(this).addClass("pagerbtnMouseEnter"); 
     }, 
     mouseout: function() { 
      $(this).removeClass("pagerbtnMouseEnter") 
      $(this).addClass("clickClass"); 
     } 
    }); 
});