懸停時未定義的變量

我有兩個列表，當我將鼠標懸停在單列表中的Tom上時，我想讓他的描述變爲紅色，因此我添加了一個如下所示的懸停類。我遇到的問題是我無法刪除懸停狀態，因爲我正在離開懸停狀態時發生未定義狀態。我已經評論了迄今爲止我嘗試過的幾件事情。當我離開懸停時，是否有辦法知道id的值或刪除頁面上懸停的任何類？懸停時未定義的變量

<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; 
    }

來源

2013-12-19 ak85

你得到錯誤，因爲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"); 
    } 
);

來源

2013-12-19 22:53:48

感謝您的答覆，我想你說的，但我不能似乎仍刪除類由於某種原因？在這個小提琴http://jsfiddle.net/aaronk85/6Q9LX/我已經添加了一個確認身份證的警報，但它不是刪除？你能看到我在這裏錯過了什麼嗎？ – ak85

@ ak85你在第二個函數中有'$（'body'）。removeClass（「hover」）'，但它看起來像你想要做'id = id.replace（/ u /，''）'。看到我更新的答案。 –

你是那個身體有點在那裏，因爲我想也許我可以看看身體和刪除和類叫做懸停，但我已經評論它，因爲我知道它不會如此工作。謝謝 – ak85

試試這個.. 把一個'臨時'變量與另一個列表元素.. 我不明白你爲什麼從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);

來源

2013-12-19 22:59:46

你沒有在第二個函數中使用'$ item'。 – Barmar

謝謝@Barmar。刪除並修復。 –

懸停時未定義的變量

回答

相關問題