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