Question

我有两个列表，当我在一个列表中悬停在Tom上时，我希望关于他的描述变为红色，所以我添加了一类悬停，如下所示。我遇到的问题是我无法删除悬停状态，因为当我离开悬停状态时，我得到了未定义。我已经评论了迄今为止我尝试过的一些事情。当我离开悬停时，有没有办法知道id的值或删除页面上任何名为hover的类？

    <ul id="one-list">
        <li id="u11">Tom</li>
        <li id="u22">Jerry</li>
    </ul>

    <ul id="another-list">
        <li id="a11">Tom is 22 years old</li>
        <li id="a22">Jerry is 18 years old</li>
    </ul>

    $("#one-list li").hover(

    function () {
        var id = jQuery(this).attr('id') || '';
        id = id.replace(/u/, '');
        $('#another-list #a' + id ).addClass("hover");
    }, function () {
        //$('body').removeClass("hover");
        //$('#another-list #a' + id ).removeClass("hover");
    }
    );

    .hover {
        color:red;
    }

Answer 1

您收到该错误是因为id仅在第一个函数中定义。您需要在第二个函数中再次获取id，例如：

$("#one-list li").hover(
    function () {
        var id = jQuery(this).attr('id') || '';
        id = id.replace(/u/, '');
        $('#another-list #a' + id ).addClass("hover");
    }, function () {
        var id = jQuery(this).attr('id') || '';
        id = id.replace(/u/, '');
        $('#another-list #a' + id ).removeClass("hover");
    }
);

或更简单

$("#one-list li").hover(
    function () {
        var id = this.id.replace('u', '');
        $('#another-list #a' + id ).addClass("hover");
    }, function () {
        var id = this.id.replace('u', '');
        $('#another-list #a' + id ).removeClass("hover");
    }
);

甚至更好：

 $("#one-list li").hover(
    function () {
        var id = this.id.replace('u', '');
        $('#another-list #a' + id ).toggleClass("hover");
    }
 );

Answer 2

试试这个.. 将一个'临时'变量与另一个列表元素放在一起.. 我不明白为什么你从id中删除'u'但是......

http://jsfiddle.net/ND3p8/3/

(function($){

    var $listItem = $("#onelist li");
    var $anotherListItem = null;

    $listItem.hover(function(){ //handlerIn

        var $item = $(this);
        var id    = $item.attr('id');


        id = id.replace(/u/,''); //replace letter 'u'...why?

        $anotherListItem = $("#a"+id);

        if( $anotherListItem ){
            $anotherListItem.addClass('hover');
        }

    },function(){ //handlerOut

        if( $anotherListItem ){
            $anotherListItem.removeClass('hover');
        }

        $anotherListItem = null;

    });


})(jQuery);

悬停时未定义的变量

2 个答案: