代码之家 › 专栏 › 技术社区 › Black_Lightning

从标记中查找src图像值

imagesource image-gallery src href javascript

0

Black_Lightning · 技术社区 · 8 年前

我一直在建立一个图片库,里面有数百张图片,我不想因为明显的带宽问题而把它们全部加载到页面上。首先,我提出;

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

为了防止图片加载,请执行以下操作。。。恐怕太好了,因为它没有加载我的网站标题横幅图片。无论如何,我的图库设置了一个菜单,每个按钮代表一个不同的图像。菜单以这种格式显示;

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

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

3 回复 | 直到 8 年前

1

0

JanR rpy 8 年前

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

你正在定义 var Imgsrc 在 if 块如果表达式不正确,则 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>

2

0

Ryan Plant 8 年前

这里有一个更简单的方法。您不需要添加或删除新的图像元素,只需更改 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>

3

0

Mark Schultheiss 8 年前

我将提出一组修改后的标记和代码。因为您的代码中似乎有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'));
});