更改圖像src和href路徑

Question

我想更改多張圖片的路徑，但是這有什么問題。 誰能幫我解決這個問題。 該代碼運行良好，但是所有縮略圖圖像和href路徑都出現在同一圖像源（01_sml.jpg）和（Picture1.jpg）中。

js-

$img = $('#adv1 li img');
    $img.attr('src', $img.attr('src').replace("img/","img/_advertorial/00/") );
    $img = $('#adv1 li a');
    $img.attr('href', $img.attr('href').replace("img/","img/_advertorial/00/") );

html-

<ul class="thumbs" id="adv1">
<li><a class="venobox" data-gall="myGallery" href="img/Picture1.jpg"><img src="img/01_sml.jpg" /></a></li>
<li><a class="venobox" data-gall="myGallery" href="img/Picture2.jpg"><img src="img/02_sml.jpg" /></a></li>
<li><a class="venobox" data-gall="myGallery" href="img/Picture3a.jpg"><img src="img/03_sml.jpg" /></a></li>
<li><a class="venobox" data-gall="myGallery" href="img/Picture4.jpg"><img src="img/04_sml.jpg" /></a></li>
<li><a class="venobox" data-gall="myGallery" href="img/Picture5.jpg"><img src="img/05_sml.jpg" /></a></li>
<li><a class="venobox" data-gall="myGallery" href="img/Picture6.jpg"><img src="img/06_sml.jpg" /></a></li>
<li><a class="venobox" data-gall="myGallery" href="img/Picture7.jpg"><img src="img/07_sml.jpg" /></a></li>
<li><a class="venobox" data-gall="myGallery" href="img/Picture8.jpg"><img src="img/08_sml.jpg" /></a></li>
</ul>

Answer 1

您需要使用.each遍歷每個元素，以免覆蓋所有元素：

$img = $('#adv1 li img');
$img.each(function( i ) {
    $(this).attr('src', $(this).attr('src').replace("img/","img/_advertorial/00/") );
});

$img = $('#adv1 li a');
$img.each(function( i ) {
    $(this).attr('href', $(this).attr('href').replace("img/","img/_advertorial/00/") );
});

Answer 2

$ img = $（'＃adv1 li img'）返回img元素數組，因此您需要使用.each（）函數進行迭代

    $img = $('#adv1 li img');
$img.each(function( i ) {
    $(this).attr('src', $(this).attr('src').replace("img/","img/_advertorial/00/") );
});

$img = $('#adv1 li a');
$img.each(function( i ) {
    $(this).attr('href', $(this).attr('href').replace("img/","img/_advertorial/00/") );
});

Answer 3

您可以使用prop的函數重載為每個元素執行一個動作並為其賦值：

$('#adv1 li img').prop("src", function(index, existingValue) {
    return existingValue.replace("img/","img/_advertorial/00/");
}); 
$('#adv1 li a').prop("href", function(index, existingValue) {
    return existingValue.replace("img/","img/_advertorial/00/");
}); 

jsFiddle示例

這樣做的好處是您不必重新查詢jQuery已經提供的信息，例如該屬性的現有值。