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>

＆＃13;

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

＆＃13;

<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>

＆＃13;

替换背景图像和元素文本

1 个答案: