0

我似乎在使用 jQuery off() 方法从元素中删除某些事件时遇到了一些麻烦。当我符合某个条件时，我想删除 mouseenter 和 mouseleave 事件。

这是我得到的。

jsfiddle：http: //jsfiddle.net/GE7Wg/

在上面的小提琴中，第 2 条不应有与其关联的 mouseenter/mouseleave 事件。

谢谢！

HTML

<!DOCTYPE html>
<html>
<head></head>
<body>   
    <input type="hidden" id="HiddenMediaID" value="450">

    <article class="Article">
        Article 1                
        <input type="hidden" class="LatestMediaID" value="200" />
    </article>

    <article class="Article">
        Article 2
        <input type="hidden" class="LatestMediaID" value="450" />
    </article>

    <article class="Article">
        Article 3
        <input type="hidden" class="LatestMediaID" value="700" />
    </article> 
</body>
</html>

jQuery

//Page loaded - jQuery Ready
$(document).ready(function () {   
    //User hovering over article. Change BG.
    $(document).on('mouseenter', '.Article', function () {
        $(this).css('background', '#F0F8FF');
    }).on('mouseleave', '.Article', function () {
        $(this).css('background', '#FFFFFF');
    });

    //Set active BG color if condition is met.
    $('.LatestMediaID').each(function () {
        var LatestMediaID = $(this).val();     

        //Disable mouseenter and mouseleave events on the matched Article.
        if (LatestMediaID == $('#HiddenMediaID').val()) {
            //Disable events.
            $(document).off('mouseenter', $(this).parent());
            $(document).off('mouseleave', $(this).parent());

            //Change BG color to light blue.    
            $(this).parent().css('background', '#F0F8FF');
        }
    });
});

CSS

.Article {
    width: 150px;
    height: 35px;
    line-height: 35px;
    margin: 10px;
    background-color: #FFFFFF;
    border: 1px solid #CCCCCC;
    text-align: center;    
}

​</p>

4

3 回答 3

1

让我们做一些 DOM 操作并抛出一些条件

//Page loaded - jQuery Ready
$(document).ready(function () {

    //User hovering over article. Change BG.
    $(document).on('mouseenter', '.Article', function () {
        if( !( $(this).hasClass('donotSelect') ) )
            $(this).css('background', '#F0F8FF');
        else
             $(document).off('mouseleave', $(this));
    }).on('mouseleave', '.Article', function () {
        if( !( $(this).hasClass('donotSelect') ) )
            $(this).css('background', '#FFFFFF');
        else
             $(document).off('mouseenter', $(this));
    });

    //Set active BG color if condition is met.
    $('.LatestMediaID').each(function () {
        var LatestMediaID = $(this).val();     

        //Disable mouseenter and mouseleave events on the matched Article.
        if (LatestMediaID == $('#HiddenMediaID').val()) {
            $(this).parent().addClass("donotSelect");
            //Change BG color to light blue.    
            $(this).parent().css('background', '#F0F8FF');
        }
    });

});

http://jsfiddle.net/GE7Wg/5/

于 2012-12-17T20:47:09.450 回答
0

不确定是什么导致了问题，但是您可以通过预先检查值来避免首先添加事件。

也许使用类似的东西：

$(function() {
    var hidID = $("#HiddenMediaID").val();
    $(".Article").each(function(){
        var article = $(this);
        if(article.find(".LatestMediaID").val() !== hidID)
        {
            article.on("mouseenter", function(){ article.css("background", "#F0F8FF") });
            article.on("mouseleave", function(){ article.css("background", "#FFFFFF") });
        }
    });
});

​</p>

于 2012-12-17T20:36:45.323 回答
0

有一种方法可以通过在所选文章级别http://api.jquery.com/event.stopPropagation/从那里添加另一个事件来按照您想要的方式进行操作，但这真的很难看。通过 CSS http://jsfiddle.net/liho1eye/GE7Wg/4/处理这个问题要干净得多

.selected, .hover { background-color:#F0F8FF;}​

脚本：

$(document).on('mouseenter mouseleave', '.Article', function(e) {
    $(this).toggleClass("hover", e.type == "mouseenter");
});
于 2012-12-17T20:41:21.273 回答