試圖切換面板，同時將圖標更改爲'查看更多'和'查看更少'

我剛開始學習jQuery/javascript，所以這可能看起來像一個非常基本的問題，但它令我煩惱。試圖切換面板，同時將圖標更改爲'查看更多'和'查看更少'

我有一個面板6 <li> s，其中3個是隱藏的，直到點擊'查看更多'的鏈接，此時面板切換顯示其他3.該圖標從'更多'變爲'更少'，但不會變回'更多'。任何人都可以在代碼中看到問題嗎？

任何幫助，將不勝感激:)

謝謝，大衛

$(document).ready(function() { 
    $('.allApps').hide(); 
    $('.moreAppsIcon').click(function() { 
    $('.moreAppsIcon').removeClass("moreAppsIcon").addClass("lessAppsIcon"); 
    $(this).toggleClass("active"); 
    $('.allApps').slideToggle("slow"); 
    return false; 
    }); 

    $('.lessAppsIcon').click(function() { 
    $('.appsMore').slideToggle("slow", function() { 
     $('.appsMore').removeClass("appsMore").addClass("moreAppsIcon"); 
     $(this).toggleClass("active"); 
     return false; 
    });        
    }); 
});

來源

2010-07-15 SixtySticks

它很容易在這裏使用.live()，像這樣：

$('.moreAppsIcon').live('click', function() { 
//and... 
$('.lessAppsIcon').live('click', function() {

否則你的功能都沒有被正確綁定。例如$('.lessAppsIcon')找到那個類在那個時候的元素，並綁定一個click處理程序給他們...後來得到這個類的元素沒有得到那個click處理程序，而.live()在元素的選擇器上工作事件，有你想要的結果。

所以基本上你要附加n事件處理程序，一個最初的每個元素匹配......當你做.addClass()其他元素沒有得到這樣的事件處理程序所有的突然，它是在DOM元素，你最初發現，當他們改變課程時不會動態添加到其他人。出於同樣的原因，.removeClass()不是刪除事件處理程序。但是，如果您使用像上面那樣的.live()，它將會像改變事件一樣改變事件處理程序的效果。

來源

2010-07-15 12:36:51

感謝您的建議。我試了一下，但似乎還沒有工作。它似乎是$（'。appsMore'）。removeClass（「appsMore」）。addClass（「moreAppsIcon」）;線路沒有做任何事情。還有其他建議嗎？ – SixtySticks 2010-07-15 13:39:56

我想通了。這幾乎是Nick所說的事實上與事件的時間有關。我向<li>添加了一個ID來處理點擊事件。這是什麼樣子：

$(document).ready(function() { 
    $('.allApps').hide(); 
    $('#moreOrLess').click(function() { 
     $('.allApps').slideToggle("slow", function() { 
      $('#moreOrLess').toggleClass("moreAppsIcon").toggleClass("lessAppsIcon"); 
      $(this).toggleClass("active"); 
     }); 
     return false; 
    });  
});

乾杯的幫助雖然尼克:)

來源

2010-07-15 14:18:15 SixtySticks

試圖切換面板，同時將圖標更改爲'查看更多'和'查看更少'

回答

相關問題