从 <a href> 标签中查找 src 图像值
Find a src image value from an <a href> tag
我一直在构建一个包含数百张图片的图片库,我不希望因为明显的带宽问题而在页面加载时加载所有图片。对于初学者,我说;
<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>
你能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>
不确定我是否完全理解您的问题,但我确实发现您的代码存在问题。
您正在 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 或更多详细信息,以便我们解决这个问题?
我会提出一套修订后的标记和代码。由于您的代码中似乎有 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'));
});
我一直在构建一个包含数百张图片的图片库,我不希望因为明显的带宽问题而在页面加载时加载所有图片。对于初学者,我说;
<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>
你能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>
不确定我是否完全理解您的问题,但我确实发现您的代码存在问题。
您正在 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 或更多详细信息,以便我们解决这个问题?
我会提出一套修订后的标记和代码。由于您的代码中似乎有 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'));
});