每個，attr還是這個？

我不確定我是否需要each()函數，或者我可以用this來做這件事。我試圖根據if語句切換src屬性。它的工作原理除了將它們切換爲hifi1.jpg。我該如何使它適用於每個img的data-websrc價值本身？每個，attr還是這個？

HTML：

<img class="airsrc" src="lofi1.jpg" data-websrc="hifi1.jpg" alt="example1"> 
<img class="airsrc" src="lofi2.jpg" data-websrc="hifi2.jpg" alt="example2">

JS：

jQuery(document).ready(function($) { 
    var airsrc = $('.airsrc'); 
    airsrc.each(function() { 
     if (Modernizr.mq('(min-width:480px)')) { 
      var src = $(this).data('websrc'); 
      airsrc.attr('src', src); 
     } 
    }); 
});

更新：解決方法：

jQuery(document).ready(function($) { 
    if (Modernizr.mq('(min-width:480px)')) { 
    $('.airsrc').each(function() { 
     var $this = $(this); 
     var src = $this.data('websrc'); 
     if (src != '') { 
      $this.attr('src', src); 
     } 
    }); 
    } 
});

，在支持自定義數據屬性的瀏覽器，它從我的測試中，我已經工作發現意味着FF/Chrome/Opera/Safari。也許IE9。我認爲getAttribute可以用於（舊）IE。

來源

2011-08-13 ryanve

爲什麼你認爲'$（本）。數據（「websrc」）;'將返回值圖像的'data-websrc'屬性（無論如何這是一個無效的屬性，但這是另一回事）？ –

'each'，'attr'和'this'是完全正交的。 –

代碼錯誤的原因是因爲您在each（）循環中調用'airsrc.attr（）'而不是'$（this）.attr（）'，因此它將集合中所有內容的屬性設置爲與特定元素相反。 – Chris

var $this = $(this), 
    src = $this.data('websrc'); 
$this.attr('src', src);

它應用於兩者，因爲您將它應用於整個jQuery對象airsrc。

你必須與$(this)

或...

做到像上面的代碼，以緩存它，避免進一步查找分配$(this)到$this特指當前元素。然後你得到它的數據並改變它的屬性。

來源

2011-08-13 14:21:11 Shef

D'oh。打敗我吧。 – Malvolio

@Shef真棒作品！謝謝:) – ryanve

airsrc.attr('src', src);應該$(this).attr('src', src);，一切都將是美好

來源

2011-08-13 14:21:40 Malvolio

你要使用this裏面的每一個獲得該次迭代的特定項目，包在jQuery的，當然。對於一些小的優化...

jQuery(document).ready(function($) { 
    if (Modernizer.mq('(min-width:480px)')) { 
     $('.airsrc').each(function() { 
      var $this = $(this), 
       src = $(this).data('websrc'); 
      $this.attr('src', src); 
     }); 
    } 
});

請注意，如果您檢查each外的情況下，你只需要做一次。此外，您可以避免重新組合this的jQuery，方法是將其分配給一個變量，然後重新使用它。

來源

2011-08-13 14:21:56 tvanfosson

我對我自己進行了一些小的優化。值得注意的是，使事情工作.. :) –

@Tomalek - 啊，我看到我刪掉了''。謝謝修復！ – tvanfosson

不是問題..！ –

您可以使用attr方法的特點使你的代碼短了很多：

jQuery(function($) { 
    if (Modernizr.mq('(min-width:480px)')) { 
     $('.airsrc').attr('src', function() { 
      return $(this).data('websrc'); 
     }); 
    } 
});

來源

2011-08-13 21:03:06

每個，attr還是這個？

回答

相關問題