Question

我对此感到困惑：

我有一个带有一组按钮的页面（即带有类属性'button'的元素。这些按钮属于两个类之一（grp1和grp2）。

这些是我的要求

对于类属性为“enabled”的按钮，当鼠标悬停在它们上面时，会向它们添加一个“button-hover”类（即鼠标悬停在其上的元素）。否则，忽略悬停事件
当点击其中一个类属性为“grp2”的按钮时（注意：首先必须'启用'），我禁用该组中的所有“按钮”（即删除'启用'类对于类'grp2'的所有元素（应该选择具有类'按钮grp2'和'启用'的元素 - 但我有足够的问题，所以我现在需要保持简单。）

这就是我的页面：

<html>
<head>
   <title>Demo</title>
   <style type="text/css">
     .button {border: 1px solid gray; color: gray}
     .enabled {border: 1px solid red; color: red}
     .button-hover {background-color: blue; }
   </style>
   <script type="text/javascript" src="jquery.js"></script>
</head>
<body>
   <div class="btn-cntnr">
      <span class="grp1 button enabled">button 1</span>
      <span class="grp2 button enabled">button 2</span>
      <span class="grp2 button enabled">button 3</span>
      <span class="grp2 button enabled">button 4</span>
   </div>
   <script type="text/javascript">
      /* <![CDATA[ */
      $(document).ready(function(){

        $(".button.enabled").hover(function(){
            $(this).toggleClass('button-hover');
          }, function() {
            $(this).toggleClass('button-hover');
        });

        $('.grp2.enabled').click(function(){ $(".grp2").removeClass('enabled');});
       });      
      /* ]]> */
   </script>
</body>
</html>

目前，当点击一个类为“grp2”的按钮时，其他带有“grp2”类的元素会删除“已启用”类（正常工作）。

然而，我注意到即使该类不再具有“启用”类，SOMEHOW，仍然会将悬停行为应用于这些元素（错误）。一旦元素被“禁用”，我不再希望它响应hover（）事件。

我如何实现此行为，以及上面的代码有什么问题（即为什么它不起作用？（我还在学习jQuery）

Answer 1

所有初始化代码（即设置函数）都在$(document).ready()函数中完成。 hover和click函数根据当时元素的类进行设置。

由于悬停实际上不是一个事件 - 它是处理onmouseover和onmouseout事件的助手 - 删除解除这些功能所需的悬停行为，如此

$('.grp2.enabled').click(function() {
  $(".grp2").removeClass('enabled');
  $(".grp2").unbind('onmouseover').unbind('onmouseout');
}

如果你想重新启用（某些）按钮，你应该在启用按钮时使用.hover()帮助器和这些元素。

$.each(<collection_of_enabled_elements>, function() {
  this.hover(
    function() {
      $(this).toggleClass('button-hover');
    },
    function() {
      $(this).toggleClass('button-hover');
    }
  )
});

Answer 2

您可以将hover侦听器附加到所有按钮，然后在运行时检查特定按钮是否具有类enabled。

$(".button").hover(function(){
    if ($(this).hasClass('enabled')) {
      $(this).addClass('button-hover');
    }
  }, function() {
    $(this).removeClass('button-hover');
});

Answer 3

将事件处理程序应用于元素时，处理程序将独立于您用于查找/选择此元素的条件而应用于元素。它不是一个“规则”说：当一个按钮被启用然后应用悬停处理程序，但一个“命令”说现在“启用”的所有按钮将立即获得此悬停处理程序（并保留它，除非你删除它）。

除非你在悬停时应用不同的风格，否则你还需要其他的东西，我建议你使用CSS进行悬停：

<style type="text/css">
  .button.enabled:hover {
    background-color: blue; 
  }
</style>

此外，您使用span而不是“真实”按钮有什么特殊原因吗？你可以使用他们的“内置”功能来禁用。

jQuery多类选择

3 个答案: