根據父鏈接更改圖像源？

我已經研究過這個解決方案的Javascript，但是我擔心我的知識太少了。我猜這個問題的解決方案將不得不用「節點」來解決，但我不能圍繞在如何 ...根據父鏈接更改圖像源？

我正在尋找繞過以下網站上的圖像刪除通過改變圖像源。 Website link

<a href="/music/King+Crimson/In+the+Court+of+the+Crimson+King" class="g3 album-item-cover link-hook" itemprop="url"> 
    <div class="cover-image cover-image--no-content" style="background-image: url('http://cdn.last.fm/flatness/responsive/2/noimage/default_album_300_g4.png');"> 
     <img class="cover-image-image" src="http://cdn.last.fm/flatness/responsive/2/noimage/default_album_300_g4.png" alt="" /> 
     <div class="text-over-image "> 
     <span class="text-over-image-text">In the Court of the Crimson King</span> 
     <br/> 
     <span class="text-over-image-text text-over-image-text--secondary">148,881 listeners</span> 
     </div> 
    </div> 
</a>

現在，我已經試過很基本的功能，如 '替換'。但我沒有得到任何結果。有沒有辦法改變以下方法，使用JavaScript，具體取決於代碼頂部的URL？

例子：

<a href="/music/King+Crimson/URL-A"> 
... 
<img class="cover-image-image" src="http://cdn.last.fm/flatness/responsive/2/noimage/default_album_300_g4.png" alt="" /> 
... 
</a> 

<a href="/music/King+Crimson/URL-B"> 
... 
<img class="cover-image-image" src="http://cdn.last.fm/flatness/responsive/2/noimage/default_album_300_g4.png" alt="" /> 
... 
</a>

分爲：

<a href="/music/King+Crimson/URL-A"> 
... 
<img class="cover-image-image" src="COVERFORA.JPG" alt="" /> 
... 
</a> 

<a href="/music/King+Crimson/URL-B"> 
... 
<img class="cover-image-image" src="COVERFORB.JPG" alt="" /> 
... 
</a>

我的小材料道歉，我提供我自己，但我只是想知道，如果確實有這種解決方案。感謝您花時間閱讀本文。

乾杯！

編輯：

從以下網站源代碼的幾個例子：http://www.last.fm/music/King+Crimson/+albums

<a href="/music/King+Crimson/In+the+Court+of+the+Crimson+King" class="g3 album-item-cover link-hook" itemprop="url"> 
    <img src="http://cdn.last.fm/flatness/responsive/2/noimage/default_album_300_g4.png" alt="Album cover for In the Court of the Crimson King" class="rounded" width="220" height="220" /> 
</a> 

<a href="/music/King+Crimson/Red" class="g3 album-item-cover link-hook" itemprop="url"> 
    <img src="http://cdn.last.fm/flatness/responsive/2/noimage/default_album_300_g4.png" alt="Album cover for Red" class="rounded" width="220" height="220" /> 
</a>

現在，這個想法是插入我自己的圖像源到每個這些，但顯然這是棘手的，因爲所有鏈接都具有與默認相同的圖像。

來源

2012-10-28 user1687320

是鏈接和IMGS動態地拉什麼？如果是這樣，怎麼樣？您可能只是在您提取該信息時完成所有操作。 – Scrimothy

你可以給幾個*真正的*網址？因爲我認爲'/ music/King + Crimson/URL-A'的'href'影響'src'變成'COVERFORA.JPG'確實傳達了任務的複雜性。除非'src'真*是''coverfor' +'最後一個字母的href +'.jpg''嗎？ –

我上面添加了一些例子，歡呼聲。 – user1687320

不能完全確定你想要做

var albumCover = document.querySelectorAll('.g3.album-item-cover.link-hook'), // get all links 
    i = albumCover.length, 
    a, img, 
    dict = { // link dictionary, href : src 
     '/music/King+Crimson/In+the+Court+of+the+Crimson+King' : 'http://photobucket.com/InTheCourt.jpg', 
     '/music/King+Crimson/Discipline' : 'http://photobucket.com/Discipline.jpg' 
    }; 
while(--i >= 0) {       // loop over each link 
    a = albumCover[i];      // that link 
    img = a.getElementsByTagName('img')[0]; // that image 
    img.src = dict[a.getAttribute('href')] // replace src on that image based on that link 
       || img.src;     // else no change 
}

來源

2012-10-28 22:14:24

謝謝大家的意見，您的代碼將網頁上的圖像更改爲其alt屬性。這是最接近我看到的結果，但我想要做的是以下內容：手動給這些圖像的每個新來源，我試圖使用的是一個'案件'的情況，但我無法得到它工作。 – user1687320

@ user1687320，這是因爲我不知道如何將_href_轉換爲_src_，所以我做了一些產生_src_的東西，它不存在 - > 404錯誤 - >破碎的圖像 - >顯示_alt_ –

好吧，現在我正在尋找的是一些'if'代碼來確定圖像應該在那裏，例如： 'if（a ===（'/ music/King + Crimson /如果（a ===（'/ music/King +'+ + The Crimson + King'） {img.src ='http：//photobucket.com/InTheCourt.jpg'} if Crimson/Discipline'） {img.src ='http：//photobucket.com/Discipline.jpg'}' 但是代碼實際上會被正確書寫;） – user1687320

$('a.album-item-cover > img.rounded').each(function(e) { 
    var $this=$(this); 
    $this.attr('src',this.parentElement.href 
          .replace(/^.*\/([^\/]+)$/,'Cover_for-$1.jpg')); 
    } 
    );

$1這裏是後弦最後/

來源

2012-10-28 22:05:28

根據父鏈接更改圖像源？

回答

相關問題