从 <a href> 标记中查找 src 图像值答案

【问题标题】：Find a src image value from an <a href> tag从 <a href> 标记中查找 src 图像值
【发布时间】：2018-03-25 03:18:08
【问题描述】：

我一直在构建一个包含数百张图片的图片库，我不希望它们都在页面加载时加载，因为明显的带宽问题。首先，我把；

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

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

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

有很多按钮。单击该按钮时，它将与其链接的图形加载到名为“画廊”的 div 中所有图像都加载到带有溢出的“画廊”中：隐藏这就是他们最初想要加载的原因，该代码显示为；

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

再次在其中包含许多图像。我的脚本监听鼠标点击并立即抓取与它关联的 href 值，例如“pic1”，然后它使用它来查找与其链接的图像名称，例如“character1.jpg”，并将其存储在变量中。（我坚信这是我的问题所在）。然后，它以“图库” 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>

【问题讨论】：

您是在提高您的编程技能还是在尝试实现一个项目？有关照片库示例项目，请参阅 here。
试试 var Imgsrc= $(this).find('img')[0].attr('src');

标签： javascript href src image-gallery imagesource

【解决方案1】：

不确定我是否完全理解您的问题，但我确实看到您的代码存在问题。

您在 if 块中定义 var Imgsrc。如果表达式不正确，则不会定义 Imgsrc。然而，稍后在您的代码中，无论条件如何，您都可以使用它，而无需首先检查它是否已定义。

在下面查看我的代码 cmets。

<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 或更多详细信息以便我们解决此问题？

【讨论】：

我必须感谢您，在您隔离了 if 语句问题之后，（我删除了 'if' 语句并离开了；` var Imgsrc = $(this).find('img').attr ('src'); alert(src);` 作为一个声明，它可以很好地加载图像，所以虽然我的代码不像这里的其他海报那么优雅，但至少它可以工作，我不能谢谢你够了。有时候，新鲜的眼睛会改变一切！
最后一件事，因为从事情的声音来看，我将使用我的原始代码和 Jan 的改进，有一个最后的刺。是否可以使用 `' 进行例外处理，因为它还会阻止我网站的标题图片加载？

【解决方案2】：

您能否在 GitHub gist 或 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>

【讨论】：

首先，感谢 Ryan 如此迅速地回复，我必须道歉，我只是响应缓慢，因为我试图理解代码（这让您了解我的局限性）。从我有限的知识来看，您似乎正在获取列表值并在整个列表上应用一个侦听器（对于我假设的按钮单击），当单击一个时，将 dog.jpg 值插入到名为“选定图像”的图像 src 中我对吗？对不起，我正在努力学习。如果是这样，我是否在将其插入画廊 div 时使用 id 'selected Image' 作为脚本中的变量？
...等待它是唯一始终保持加载在画廊中的图像！我想我明白了！哦，男孩，你们可能都会嘲笑我的牺牲……请放心。
哈哈，不用担心。这个想法是页面上只有一个图像元素，我们将其保存为img；无需添加和删除图像来更改它们，您只需使用 img 并更改它所引用的 URL，这会导致它使用新 URL 重新加载。 querySelectorAll 正在获取所有 li 元素的列表，并为每个元素添加一个单独的侦听器。单击任何li 时，它会获取其data-image 属性，并将img 的src 更改为指向该属性。所以你所要做的就是确保每个data-image 都有应该加载的文件名。
有一点需要注意，看看您的原始示例，您不需要为整个窗口设置一个单击侦听器，然后尝试找出其中的哪个元素被单击。您可以将侦听器添加到单个项目，或者添加到每个项目列表，这更简单。在我上面的例子中，evt.target 总是指用户点击的任何li 项目。
还有一件事……希望如此。我只是在测试@Ryan 发布的代码，我已经在if (node != undefined) { 命令下面插入了脚本（可以在我的初始帖子中引用）希望无论如何都是正确的，似乎有一个以@987654335 为中心的语法错误@ 部分代码。我一直在尝试调试，但由于我不太明白这很困难。不要误会我，我不是在批评，而是在赞扬他的代码，它绝对出色，我迫不及待地想看到它的实际效果！我想我不是这样。

【解决方案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'));
});

【讨论】：

这两个想法似乎都很棒，尽管我似乎都无法工作。我在 megashare 上上传了几个版本，所以你可以看到代码。如果您不想看到预期的效果，请访问theamityblade.com/Characters.html。此版本通过 css 访问图像； megashare.megahd.com.br/2Wc。我不得不中止它，因为它在 IE 中不起作用并且不完全优雅。总之，Mark 提出的解决方案就是这个版本； megashare.megahd.com.br/2Wa 和瑞恩的是； megashare.megahd.com.br/2Wb我不知道我做错了什么。
你链接的 HTML 有一些挑战 - 那里链接了多个 jQuery 版本，你真的应该使用更新的副本。我在这里创建了一个小提琴，用于记录所选图像 - 没有图像出现，因为我没有，但是您可以看到实际工作代码包装在文档准备关闭 jsfiddle.net/jvtmf794
对于它的价值，我做了一个测试，将引用的站点添加到图像参考文本的前面，当您单击一个时它确实会显示图像。我不会发布该代码，因为它会引用该网站，并且我不想在未经许可的情况下这样做，即链接到图像。