尝试使用 jquery hasClass 来打破悬停功能

Posted 2023-05-09

【中文标题】尝试使用 jquery hasClass 来打破悬停功能

【英文标题】：Trying to use jquery hasClass to break hover functionality

【发布时间】：2012-05-31 00:51:45

【问题描述】：

如果满足某个条件（即一个元素有一个类，这个类是动态添加和减去的），我试图打破一个函数

代码：

this.buildMainToolsBar = function(options,display)

    var all =                       options.all || null,                                                        
        $mainToolsBarRef =          $('#mainToolsBar'),                                                         
        $disabledTools =            $('#mainToolFill, #mainToolStrokeStyle, #mainToolStrokeColour');

    if($disabledTools.hasClass('toolDisabled1')) 

        return;

    else

        $('form [id^=mainTool] > .toolInfo, form [id^=mainTool] > .navDown',$mainToolsBarRef).hover(function()     

            $(this).parents('div[id^=mainTool]:not([id=mainToolsBar]):first').addClass('toolHover');            

        ,function()

            $(this).parents('div[id^=mainTool]:not([id=mainToolsBar]):first').removeClass('toolHover');

        );

     

类 toolDisabled1 仅在单击特定元素时出现。问题似乎是即使在找到 toolDisabled1 之前条件也已返回 true。

代替：

return;

我也试过了：

$disabledTools.removeClass('toolHover');

尝试破坏功能。

我也试过了

('$disabledTools[class=toolDisabled1]').removeClass('toolHover');

如何动态检测到 toolDisabled1 类已被添加并因此退出函数？

希望这很清楚，如果您需要更多代码，请告诉我。

【问题讨论】：

你有一些相当复杂的选择器。我们将需要一些标记来验证您的选择器。此外，jsFiddle 会很有帮助。

如果你的意思是 $('form [id^=mainTool] > 等等。所有这些都在工作，这是由我之前的一个 javascript 开发人员构建的。整个 js 文件目前运行近 10,000代码行。所以 jsfiddle 需要更简单的东西。

【参考方案1】：

问题可能在于变量$disabledTools 选择了多个元素。如果此 jQuery 选择中的任何一个元素具有 toolDisabled1 类，那么您的 if 语句将返回 true。

当您进行检查时，类 toolsDisabled1 是否应用于这些元素 ($('#mainToolFill, #mainToolStrokeStyle, #mainToolStrokeColour')) 中的任何一个？

【讨论】：

是的，基本上当客户端将特定元素拖到画布上时，这三个元素都会添加 toolsDisabled1 类。我认为从长远来看，如果需要，我可以在其中存储不同的选项。我正在打磨一个渲染 svg 的绘图工具。当然，一旦它起作用，我可以将它应用到多种工具（半径、不透明度等）。

好的，只是为了确认问题。当您执行此检查时：- if($disabledTools.hasClass('toolDisabled1')) toolDisabled1 的类不适用于 $disabledTools 中的任何元素，因此不应返回 true？如果这是问题所在，则在将该类添加到您的元素之后进行上述检查。如果在 $disabledTools 元素之一上存在该类之后的任何时候进行该检查，那么它将返回 false。查看您的代码以查看该类何时应用于任何这些元素，然后查看上述检查何时发生。

哈，因为字数不够，无法在此回复。

好的，我会尽力解释。画布上的 2 个元素。客户端单击一个矩形 #mainToolFill: 客户端选择我们所谓的 iso 元素（不允许填充描边）。 #mainToolFill 现在是： 如果客户端单击画布上的其他任何位置或返回矩形，则删除 toolDisabled1 类。 toolHover 类是在悬停时动态添加的，这是我无法打破的。 在我看来，如果 $disableTools 中的任何内容当前具有类 toolDisabled1，那么该元素的悬停功能应该被破坏吗？或者它也会破坏所有其他元素？

【参考方案2】：

也许您可以考虑使用 .on 方法设置悬停事件。然后，您通常会添加 toolDisabled1 类（在选择您所谓的 iso 元素时），您可以关闭悬停事件。然后在必要时（单击画布上的其他任何位置或返回矩形），您可以重新设置悬停事件。

我在这里写了这个技术的一个小例子：http://jsfiddle.net/XyDUV/

【讨论】：

谢谢你，目前该项目唯一的缺点是我们使用的是jquery 1.6.1，我们可能可以升级到1.7，所以我需要使用绑定事件，直到我们升级.但我会看看我是否可以用你的代码实现类似的东西，再次感谢。