簡體   English   中英

根據父鏈接更改圖像源?

[英]Changing the image source depending on the parent link?

我已經研究過Javascript來解決這個問題,但是我對此的知識很有限。 我猜想這個問題的解決方案將不得不用“節點”來解決,但我只是無法確定如何解決 ...

我希望通過更改圖片來源來繞過以下網站上的圖片刪除。 網站連結

<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>

現在,我嘗試了非常基本的功能,例如“替換”。 但是我沒有結果。 有沒有一種方法可以根據代碼頂部的URL使用JavaScript更改以下內容?

例:

<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>

現在,想法是將我自己的圖像源插入每個圖像源中,但是顯然這比較棘手,因為所有鏈接都具有默認圖像。

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

$1是最后一個字符串/

不確定您要做什么

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
}

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM