製作jQuery代碼更正確/高效

嘿！我終於開始習慣使用jQuery，所以現在我試圖改進我寫的代碼。有沒有人可以幫助我提高代碼的效率？製作jQuery代碼更正確/高效

$("a.more_info").toggle(function(){ 
      var itemid = $(this).parent().parent().parent().parent().attr('id'); 
      var itemid_hash = "#" + itemid + " .details_exp"; 
      var itemid_tog_more = "#" + itemid + " a.more_info";       $(itemid_tog_more).addClass("less_info").removeClass("more_info"); 
      $(itemid_hash).fadeIn(); 
}, function() { 
      var itemid = $(this).parent().parent().parent().parent().attr('id'); 
      var itemid_hash = "#" + itemid + " .details_exp"; 
      var itemid_tog_less = "#" + itemid + " a.less_info"; 
      $(itemid_tog_less).addClass("more_info").removeClass("less_info"); 
      $(itemid_hash).fadeOut(); 
});

首先，有沒有辦法上去DOM中的四個層次，無堆疊起來.parent（）的四倍？其次，是否有更好的方法來定義「itemid」和「itemid_hash」變量，所以我不必爲切換函數的後半部分重新定義它們？代碼運行得很好，但我只想確保我以最正確的方式執行任務。謝謝！

來源

2010-11-15 coryetzkorn

什麼你的HTML？使用最接近的應該更好，然後多堆父調用。 – mpapis 2010-11-15 15:12:05

如果您顯示相應的HTML，它會更容易。 – 2010-11-15 15:13:11

http://www.coryetzkorn.com/beta/是開發站點地址 – coryetzkorn 2010-11-15 15:16:56

更新2：Working demo.

更新：爲了完整，這是我指的是HTML（僅適用於相關部分）：

<div class="work"> 
    <div class="details"> 
     <nav> 
      <a href="#" class="prev">prev</a> 
      <a href="#" class="more_info">more info</a> 
      <a href="#" class="next">next</a> 
     </nav> 
     <div class="details_exp" style="display: none; "> 
      <!-- content here ---> 
     </div> 
    </div> 
    <!-- ... --> 
</div>

你可以這樣做：

$("a.more_info").toggle(function(){ 
     $(this).addClass("less_info").removeClass("more_info"); 
     // $(this).parent().nextAll('.details_exp').fadeIn() could work too 
     $(this).closest('.work').find('.details_exp').fadeIn(); 
}, function() { 
     $(this).addClass("more_info").removeClass("less_info"); 
     $(this).closest('.work').find('.details_exp').fadeOut(); 
});

沒有必要手動構建選擇器。我認爲item_tog_less實際上是指當前點擊元素的權利？那麼你可以使用$(this)。

如果與細節框中的鏈接後總是（更確切地說它的母公司，它看起來好像是這樣），你也可以這樣做：

$(this).parent().nextAll('.details_exp').fadeIn();

參考：find()，closest()，nextAll()

PS ：好的網站！

來源

2010-11-15 15:16:56

是的，item_tog_less指向當前單擊的元素。從「a.more_info」選擇器開始，我有一大堆「.product」類四級的div。 – coryetzkorn 2010-11-15 15:22:09

太棒了！你剛剛做了四行，我花了十年時間。我知道必須有更好的方法。我總是忘記.closest（）和.find（），但它們顯然比我想象的更重要。非常感謝！ – coryetzkorn 2010-11-15 16:10:17

@coryetzkorn：不客氣:)快樂編碼！ – 2010-11-15 16:27:18

在這種情況下或多個家長，你可以換closest：

var itemid = $(this).parent().parent().parent().parent().attr('id');

對於

var itemid = $(this).closest('#YourId or .YourClass');

的，你可以在DOM的一小部分使用選擇而不是整個DOM的。

var itemid_hash = $(".details_exp", itemid);

而且，將讓你有一個jQuery對象要做到這一點

itemid_hash.fadeIn();

來源

2010-11-15 15:18:38 Siedrix

謝謝！問題解決了！ – coryetzkorn 2010-11-15 16:10:40

製作jQuery代碼更正確/高效

回答

相關問題