優化JQuery

Question

我有看起來像這樣的Jquery代碼。有沒有辦法優化這段代碼？如果圖像沒有標題屬性，會發生什麼情況？我是否應該插入一個使用alt屬性值作爲備份的案例，如果我多次鏈接.attr()函數，那麼它會更乾淨的代碼，我只需一次將.attr()函數傳遞給一個值對對象我的所有屬性的功能。我怎樣才能做到這一點 ？

$(function() { 

    $('.component-individual-detail-profile').each(function() { 
     var $self = $(this), $images = $self.find('.photos'); 

     $images.find('li').click(function(e) { 
      e.preventDefault(); 
      var thumb = $(this); 
      $images.find('.selected') 
       .attr('src', thumb.find('img').attr('src')) 
       .attr('alt', thumb.find('img').attr('alt')) 
       .attr('title', thumb.find('img').attr('title')); 

     }); 

    }); 
}); 

Answer 1

您可以存儲陣列中的屬性，並緩存$thumb.find('img')選擇：

$('.component-individual-detail-profile').each(function() { 
    var $self = $(this); 
    var $images = $self.find('.photos'); 

    $images.find('li').click(function(e) { 
    e.preventDefault(); 
    var $thumb = $(this).find('img'); 
    var $selected = $images.find('.selected'); 
    $.each(['src', 'alt', 'title'], function(index, attrName){ 
     $selected.attr(attrName, $thumb.attr(attrName)); 
    }); 
    }); 
}); 

Answer 2

您認爲初學者的var thumb = $(this).find("img")？任何地方你的代碼重複函數調用，你可能做錯了什麼。

關於「如果沒有屬性會怎麼樣」，您可以使用邏輯或thumb.attr('title') || thumb.attr('alt')或（||）在第一個不存在的情況下提供值。

按照documentation，你可以做...

$images.find('.selected').attr({ 
    src: thumb.attr('src'), 
    alt: thumb.attr('alt'), 
    title: thumb.attr('title') || thumb.attr('alt') 
});