從<a href>標簽中</a>找到src圖片值

Question

我一直在建立包含數百張圖片的圖片庫，但我不希望所有圖片都因頁面加載而出現明顯的帶寬問題。 首先，我把；

<body onload="removeAttr("src")">

為了防止圖片無法正常工作...我擔心，因為它無法加載我的網站標題橫幅圖片。 無論如何，我的畫廊都設有一個菜單，每個按鈕代表一個不同的圖像。 菜單以這種格式顯示。

 <ul id="menu">
     <li><a href="#pic1">Title</a></li>
 </ul>

有很多按鈕。 當單擊該按鈕時，它將與它鏈接的圖形加載到一個名為“ gallery”的div中。所有圖像均以溢出的方式加載到“ gallery”中：隱藏，這就是為什么它們最初要加載的原因，代碼顯示為

 <div id="gallery">
    <div>
       <a name="pic1"></a><img alt="" src="../images/characters/character1.jpg" />
    </div>
 </div>

再次有很多圖像。 我的腳本偵聽鼠標單擊，並立即獲取與其關聯的href值，即“ pic1”，然后使用它來查找與其鏈接的圖像名稱，即“ character1.jpg”並將其存儲在變量中。 （我堅信這是我的問題所在）。 然后，針對“ gallery” div刪除先前在其中的任何圖片，然后插入新圖像（存儲在變量中的圖像）。 所有這些都是為了僅加載用戶希望查看的圖形而並非全部。 該警報顯示按鈕編號，以便該部件起作用，並且我知道它刪除了div中加載的圖像，因為它似乎正在加載列表中的第一張圖像，然后該圖像在測試中消失了，但是從未將其替換為新的圖像。。

<script type="text/javascript">

window.onclick = function(e) {
  var node = e.target;
  while (node != undefined && node.localName != 'a') {
    node = node.parentNode;
  }
  if (node != undefined) {

    if (this.id == 'alternate-image') {
      var Imgsrc = $(this).find('img').attr('src');
      alert(src);
    }

    var dv = document.getElementById('gallery');
    // remove all child nodes
    while (dv.hasChildNodes()) {
      dv.removeChild(dv.lastChild);
    }
    alert("The button value is:  " + node);

    var img = document.createElement("IMG");
    img.src = Imgsrc;
    dv.appendChild(img);

    return false; // stop handling the click
  } else {
    alert('This is not a link: ' + e.target.innerHTML)
    return true; // handle other clicks
  }
}
</script>

Answer 1

您可以將完整源代碼發布到GitHub要點或pastebin嗎？

這是一種更簡單的方法。 您無需添加和刪除新的圖像元素，只需更改現有圖像元素的src屬性即可。

<ul class='imageMenu'>
  <li data-image="dog.jpg">dog</li>
  <li data-image="cat.jpg">cat</li>
  <li data-image="donkey.jpg">donkey</li>
</ul>
<img src="" id='selectedImage' />
<script>
  const img = document.querySelector('#selectedImage');
  document.querySelectorAll('.imageMenu li').forEach(item => {
    item.addEventListener('click', evt => {
      img.setAttribute('src', evt.target.getAttribute('data-image'));
    });
  });
</script>

Answer 2

不知道我是否完全理解您的問題，但是我確實看到您的代碼有問題。

您正在if塊中定義var Imgsrc 。 如果表達式不正確，則不會定義Imgsrc 。 但是在以后的代碼中，無論條件如何，都可以使用它，而無需首先檢查它是否已定義。

請參閱下面的代碼注釋。

<script type="text/javascript">

window.onclick = function(e) {
  var node = e.target;
  while (node != undefined && node.localName != 'a') {
    node = node.parentNode;
  }
  if (node != undefined) {

    if (this.id == 'alternate-image') {
      var Imgsrc = $(this).find('img').attr('src'); //<!---- here you define the Imgsrc var 
      //but what if the this.id != 'alternate-image'??
      alert(src);
    }

    var dv = document.getElementById('gallery');
    // remove all child nodes
    while (dv.hasChildNodes()) {
      dv.removeChild(dv.lastChild);
    }
    alert("The button value is:  " + node);

    var img = document.createElement("IMG");
    img.src = Imgsrc; //<!---- need to check if this is defined.
    dv.appendChild(img);

    return false; // stop handling the click
  } else {
    alert('This is not a link: ' + e.target.innerHTML)
    return true; // handle other clicks
  }
}
</script>

您有機會發布您的html或更多詳細信息，以便我們解決此問題嗎？

Answer 3

我將提出一套修訂的標記和代碼。 由於您的代碼中似乎包含jQuery，因此我將使用它。

圖像菜單：

<ul id="menu">
     <li class="image-link" data-image="../images/characters/character1.jpg">Title 1</li>
     <li class="image-link" data-image="../images/characters/character2.jpg">Title 2</li>
     <li class="image-link" data-image="../images/characters/character3.jpg">Title 3</li>
</ul>

向他們展示的地方：

<div id="gallery">
    <img alt="" src="" />
</div>

代碼顯示給他們：

$('#menu').on('click','.image-link',function(){
   $('#gallery').find('img').attr('src', $(this).data('image'));
});

從<a href>標簽中</a>找到src圖片值

問題描述

3 個解決方案

解決方案1
0 2017-10-13 04:06:18

解決方案2
0 已采納 2017-10-13 04:46:17

解決方案3
0 2017-10-13 05:00:47

從<a href>標簽中</a>找到src圖片值

問題描述

3 個解決方案

解決方案1 0 2017-10-13 04:06:18

解決方案2 0 已采納 2017-10-13 04:46:17

解決方案3 0 2017-10-13 05:00:47

解決方案1
0 2017-10-13 04:06:18

解決方案2
0 已采納 2017-10-13 04:46:17

解決方案3
0 2017-10-13 05:00:47