JQuery：使用：not（.active）選擇器，並添加一個Active類到選定的項目

我是Javascript的新手，並且在使用NOT選擇器時遇到了一些問題，並且在功能，希望這會對某人有意義。JQuery：使用：not（.active）選擇器，並添加一個Active類到選定的項目

我正在創建一個小畫廊，我的目標是有可點擊的導航，但是點擊後活動圖片會重定向到另一個頁面。

代碼如下：

$("ul#mainGallery li:not(.active) a").click(function(){ 
     var thisListClass = $(this).parent().attr('class'); 
     var activeListId = $(this).parent().attr('id'); 
     var newMarginLeft = (activeListId-3) * -200; 
     var animateAction = {}; 
      animateAction['margin-left'] = newMarginLeft + 'px'; 
     $("ul#mainGallery").animate(animateAction, 1000); 
     $('li.active img').animate({width:'100px', height:'100px'},1000) 
     $(this + 'img').animate({width:'300px', height:'300px'},1000) 
     $(li.active).removeClass('active'); 
     $(this).parent().addClass('active'); 
     return false;

我知道有可能是一個更好的方法來做到這一點，但我不能讓我的頭周圍。

編輯：我也許應該說是什麼問題...

當點擊一個活動圖像，它遵循的超級鏈接一切都很好。

當一個非活動圖像被點擊時，它開始動畫，然後（我假設）當'活躍'類被添加，而不是返回false，它返回true，並跟隨超鏈接。

來源

2011-05-30 CharlesRock

閱讀更多關於[不選擇]（http://api.jquery.com/not-selector/） – Ibu 2011-05-30 20:26:29

你真的在第三行到最後一行有'$（li.active）'或'$（'li.active'）'嗎？也是第四到最後一行可能沒有做任何事情，因爲什麼是「this」，你的意思是'$（'＃'+ this.id +'img'）'？如果你有運行時錯誤（比如'li'沒有定義，並且你正在嘗試獲得'active'屬性，那麼返回false將會發生並且鏈接*將會被* – lambacck 2011-05-30 21:06:32

啊，謝謝，我錯過了那個''第四行最後一行正在工作，雖然可能寫得更好，但它選擇的是這個圖像（$（this）是一個列表項） – CharlesRock 2011-05-30 21:30:56

你要綁定的click事件$("ul#mainGallery li:not(.active) a")每當代碼運行（想必對文檔加載）。在那個點上沒有活動的項目將會綁定該項目，然後在其他項目上更改該類別不會將此事件綁定到它們。您需要更改綁定方式或者檢查該項目是否具有該類。

事情是這樣的：

$("ul#mainGallery li a").click(function(){ 
if(!$(this).parent().hasClass('active')){ 


     var thisListClass = $(this).parent().attr('class'); 
     var activeListId = $(this).parent().attr('id'); 
     var newMarginLeft = (activeListId-3) * -200; 
     var animateAction = {}; 
      animateAction['margin-left'] = newMarginLeft + 'px'; 
     $("ul#mainGallery").animate(animateAction, 1000); 
     $('li.active img').animate({width:'100px', height:'100px'},1000) 
     $(this + 'img').animate({width:'300px', height:'300px'},1000) 
     $('li.active').removeClass('active'); 
     $(this).parent().addClass('active'); 
     return false; 
}

編輯，或者如果你願意繼續使用與:not，一切都相同的選擇，然後換你的click功能.live()

來源

2011-05-30 20:32:19 Niklas

Oh Thankyou ..我想這將工作，我實際上已經計劃在做這個，然後發現了非選擇器。 – CharlesRock 2011-05-30 20:36:13

'not'選擇器是偉大的，只需要知道什麼時候使用它。 – Niklas 2011-05-30 20:37:38

謝謝，我曾嘗試使用.live（）函數，但有同樣的問題米（實際上你的代碼也是一樣的）。我不得不移動IF語句之外的removeClass和addClass部分 – CharlesRock 2011-05-30 20:49:31

要停止默認行爲使用preventDefault（）函數

$("ul#mainGallery li:not(.active) a").click(function(e){ 
    e.preventDefault(); // will stop the default behaviour 
}

瞭解更多關於Jquery docs

來源

2011-05-30 20:28:52 Ibu

他有'return false'在他的代碼中，它阻止了默認的鏈接動作。 – Niklas 2011-05-30 20:34:39

它確實停止了默認的鏈接動作。http://stackoverflow.com/questions/1357118/javascript-event-preventdefault-vs-return-false – Niklas 2011-05-30 20:56:45

JQuery：使用：not（.active）選擇器，並添加一個Active類到選定的項目

回答

相關問題