Question

我有'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>

这些是项目单元格，它们使用相同的模板生成，因此类始终相同。他们中有很多人。到目前为止我的脚本正在运行，但仅适用于列表中的第一个产品（显示正确的徽标）。

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();

我环顾四周，但确定如何循环，或者即使这是解决方案。

http://jsfiddle.net/W7bm5/

Answer 1

如果你使用jQuery每个函数都很容易。

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);">');
    });
});

Answer 2

您可以使用for循环来运行您为getElementsByClassName结果的不同索引所拥有的代码。查看您的jsFiddle

你也可以放弃getElementByClassName，我觉得在某些浏览器中有点支持并且性能不是特别好，如果你的结构总是相同的话，使用JavaScript导航DOM，如果你的话，甚至是jQuery我喜欢图书馆，以便更容易。

但到目前为止，最好的情况是，如果你在第一时间生成它的话。你是如何生成代码的，你能否用它来实现你想要实现的目标？

获取多个元素相同的类 - JavaScript（getElementsByClass）

2 个答案: