替换背景图像和元素文本

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 范围的背景图像和 .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 行的问题报告为：

"Unexpected identifier" (line 12 is 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>

替换背景图像和元素文本

Replacing background image and element text

javascript

jquery

html

background-image

custom-data-attribute