2

我有一个“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/

4

2 回答 2

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);">');
    });
});
于 2013-05-28T22:53:49.883 回答
0

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

您也可以getElementByClassName放弃 ，我认为它在某些浏览器中支持参差不齐并且性能不是特别好，如果您的结构始终相同，则使用 JavaScript 导航 DOM，如果您想要一个库来制作它，甚至可以使用 jQuery更轻松。

但到目前为止，最好的办法是你在它最初生成时就这样做了。你是如何生成代码的，你不能用它来实现你想要实现的目标吗？

于 2013-05-28T22:55:56.450 回答