替换背景图像和元素文本

Question

我正在构建一个脚本，将自定义文本和图像注入到结构相当复杂的HTML页面：

<ul class="list">
<li class="result">
<div class="div_result">
<div class="display">
<div class="record-icon pubtype">
<span class="pubtype-icon"></span>
<p class="text">icon text</p>
</div>
<div class="links">
<span class="custom-link"><a class="icon-image-link" href="image.jpg" onclick="string">String<a/></span>
<span class="custom-link"><a class="icon-image-link" href="image.jpg" onclick="string">String<a/></span>
<span class="custom-link"><a class="icon-image-link" href="image.jpg" onclick="string">String<a/></span>
</div>
</div>
</div>
</li>
</ul>

我编写了一个 JavaScript，旨在搜索 a 元素中的特定子字符串，如果存在，则根据用户的输入更改 .icon span 的背景图像和 .text p 元素的文本：

try {
var backgroundcontainer= setInterval("addMyScript()", 100);
function addMyScript() {
if (!window.jQuery){return;}
clearInterval(backgroundcontainer); //clean interval
jQuery(function() {
var pubtypes = $('#custompubtypeicon').data('pubtypes');
var icons = $('#custompubtypeicon').data('icons');
pubtypes.forEach(Function() {
var elementclass = document.getElementsByClassName("icon-image-link");
var index = $(pubtypes).indexOf($(this));
elementclass.forEach(replace() {
if ($(this).attr('onclick').indexOf('pbt=')+pubtypes[index] > -1) {
$(this).closest('.pubtype-icon').style.backgroundImage = icons[index];
$(this).closest("div.record-icon p").text(pubtypes[index]);
}
});
});
});
}
} catch (err) {
console.info(err);
}

我收到一条错误消息missing ) after argument list阻止我测试其余代码。我对 http://esprima.org/demo/validate.html 进行了验证，第 12 行的问题报告为：

"意外标识符"(第 12 行是 var elementclass = document.getElementsByClassName("icon-image-link"(;)

我想在代码正常工作之前还有更多问题需要解决，但这阻止了我继续。 我在网上检查了几个解决方案(包括这里(，但它们都处理简单的缺少括号，而第 12 行似乎没有任何缺失的元素。

Answer 1

检查这些错误

• pubtypes.forEach(Function() {行应该是pubtypes.forEach(function() {的 - 没有资本的功能F
• elementclass.forEach(replace() {再次，它应该是function而不是replace-elementclass.forEach(function () {
• <a>...<a/>应该<a>...</a>

try {
var backgroundcontainer= setInterval("addMyScript()", 100);
function addMyScript() {
if (!window.jQuery){return;}
clearInterval(backgroundcontainer); //clean interval
jQuery(function() {
var pubtypes = $('#custompubtypeicon').data('pubtypes');
var icons = $('#custompubtypeicon').data('icons');
pubtypes.forEach(function(){
var elementclass = document.getElementsByClassName("icon-image-link");
var index = $(pubtypes).indexOf($(this));
elementclass.forEach(function () {
if ($(this).attr('onclick').indexOf('pbt=')+pubtypes[index] > -1) {
$(this).closest('.pubtype-icon').style.backgroundImage = icons[index];
$(this).closest("div.record-icon p").text(pubtypes[index]);
}
});
});
});
}
} catch (err) {
console.info(err);
}

<ul class="list">
<li class="result">
<div class="div_result">
<div class="display">
<div class="record-icon pubtype">
<span class="pubtype-icon"></span>
<p class="text">icon text</p>
</div>
<div class="links">
<span class="custom-link"><a class="icon-image-link" href="image.jpg" onclick="string">String</a></span>
<span class="custom-link"><a class="icon-image-link" href="image.jpg" onclick="string">String</a></span>
<span class="custom-link"><a class="icon-image-link" href="image.jpg" onclick="string">String</a></span>
</div>
</div>
</div>
</li>
</ul>