Question

我想在没有特定类名属性的元素上禁用悬停（并单击）：

<svg>
   <path class="myClass"></path>
   <path class="myClass active"></path>
</svg>

基本上，如果路径没有属性className“active”，请不要悬停或点击

尝试：

    if (!$("path").hasClass("active")) {
        $(this).unbind('mouseenter mouseleave');
    };

但我相信我应该使用.attr("class"..)，因为它是svg path

Answer 1

您只能向元素.active类添加事件处理程序。但是，如果您无法执行此操作，请使用:not()选择器选择元素hasn＆t [{1}}类。

.active

Answer 2

此演示使用.attr()功能。有了这个，你将不得不循环遍历每个所需的元素并循环其类列表（如果存在）并查看它是否包含.active类，如果没有，则取消绑定该元素的事件。

$('p').on('mouseenter', function() {
    $(this).css('background', 'blue');
})

$('p').on('mouseleave', function() {
    $(this).css('background', 'black');
})


$('p').each(function(indx, elem) {
    var activeNotFound = 1;
    var classes = [];
    if ($(elem).attr('class') !== undefined) { // check if elem has attribute class
    	classes = $(elem).attr('class').split(" "); // split into array the attribute class
        $.each(classes, function(ndx, classname) { // loop each class to check if active exist
            if (classname === 'active') {
                activeNotFound = 0;
            }
          // removed the else part.
        });
    }
    
    if (activeNotFound) { // if no active class found unbind events
        $(elem).unbind('mouseenter mouseleave')
    }
})

div p {
    width: 100px;
    height: 100px;
    background: #000;
    border: 5px solid #000;
}

p.active {
    border: 5px solid red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h4>Note: I used a different element for this demo. Just change it to the needed elements and also update the script</h4>
<div>
    <p class="myClass"></p>
    <p class="myClass active"></p>
    <p></p>
</div>

停止悬停并单击没有特定类属性的元素

2 个答案: