javascript - 获取同一个类的多个元素 - JavaScript (getElementsByClass)

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>

这些是项目单元格，它们使用相同的模板生成，因此类始终相同。他们有很多。到目前为止，我的脚本正在运行，但仅适用于列表中的第一个产品(显示正确的 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();

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

http://jsfiddle.net/W7bm5/

Answer 1

如果你使用 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);">');
    });
});