我有一个“a href”,它是一个标题。
<a href="#" class="title">Vendor1 product title</a>
我想根据标题的第一个单词显示图像。
<a href="#" class="title">Vendor1 product title</a>
<div class="logo"></div>
<a href="#" class="title">Vendor2 product title</a>
<div class="logo"></div>
<a href="#" class="title">Vendor3 product title</a>
<div class="logo"></div>
这些是项目单元格,它们使用相同的模板生成,因此类始终相同。他们有很多。 到目前为止,我的脚本正在运行,但仅适用于列表中的第一个产品(显示正确的 Logo )。
function getlogo() {
var string1 = document.getElementsByClassName('title')[0].innerHTML;
var vendor = string1.replace(/([a-z]+) .* ([a-z]+)/i, "$1").toLowerCase();
document.getElementsByClassName('logo')[0].innerHTML = '<img src="/myimages/' + vendor + '.jpg" width="100px" height="50px" onerror="imgError(this);">';
function imgError(image) {
image.onerror = "";
image.src = "default.jpg";
return true;
}
}
getlogo();
我环顾四周,但确定如何循环这个,或者即使这是解决方案。
最佳答案
如果你使用 jQuery each 函数就很容易了。
function imgError(image) {
image.onerror = "";
image.src = "default.jpg";
return true;
}
$(document).ready(function() {
$(".title").each(function() {
var string1 = $(this).text();
var vendor = string1.replace(/([a-z]+) .* ([a-z]+)/i, "$1").toLowerCase();
$(this).html('<img src="/myimages/' + vendor + '.jpg" width="100px" height="50px" onerror="imgError(this);">');
});
});
或者您可以使用纯 javascript 来完成,但是将您的逻辑放在一个循环中,并将 [0] 替换为循环索引。
更新 - 这是保留当前文本链接的方法:
function imgError(image) {
image.onerror = "";
image.src = "default.jpg";
return true;
}
$(document).ready(function() {
$(".title").each(function() {
var string1 = $(this).text();
var vendor = string1.replace(/([a-z]+) .* ([a-z]+)/i, "$1").toLowerCase();
var html = $(this).parent().html();
$(this).parent().html(html + '<br /><img src="/myimages/' + vendor + '.jpg" width="100px" height="50px" onerror="imgError(this);">');
});
});
关于javascript - 获取同一个类的多个元素 - JavaScript (getElementsByClass),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16802675/