如何使用 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";
            }
        }

当我进行鼠标悬停或鼠标离开时，我必须防止所选按钮更改 CSS 类。

Answer 1

You 按钮有 3 种不同的状态：
- 普通的
- 悬停
- 已选

为什么你只有2节课？如果你想这样做，你应该有另一个 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 页面上，只需将单击的按钮的 .button 类替换为 buttonClicked 类:)

Answer 2

那么，您可以将单击的 Button 的 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

这样的事情对你有用吗？

$(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");
       }
    });
});