从 <a href> 标签中查找 src 图像值

Question

我一直在构建一个包含数百张图片的图片库，我不希望因为明显的带宽问题而在页面加载时加载所有图片。对于初学者，我说；

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

防止加载图片，这很有效...太好了，我担心它不会加载我的网站 header 横幅图片。无论如何，我的画廊设置了一个菜单，每个按钮代表不同的图像。菜单以这种格式显示；

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

有很多按钮。单击该按钮时，它会将与其链接的图形加载到名为 "gallery" 的 div 中，所有图像都加载到 "gallery" 中，并带有 overflow: hidden 这就是他们最初要加载的原因，该代码显示为；

 <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

你能post 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>

您是否有机会 post 您的 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> 标签中查找 src 图像值

Find a src image value from an <a href> tag

javascript

href

src

image-gallery

imagesource