Question

我使用以下脚本来更改内部HTML，但它不起作用。我在这里缺少什么？

脚本：

<script type="text/javascript">
var allElements = document.body.getElementsByClassName("benkopte-specs-list");
for(var i = 0; i < allElements.length; i++) {
    var text = allElements[i].innerHTML;
    if (text == 'Ja') {
        allElements[i].innerHTML = "<i class='icon-specs-ja'></i>";
    }
    if (text == 'Yes') {
        allElements[i].innerHTML = "<i class='icon-specs-ja'></i>";
    }
    if (text == 'Nee') {
        allElements[i].innerHTML = "<i class='icon-specs-nee'></i>";
    }
    if (text == 'No') {
        allElements[i].innerHTML = "<i class='icon-specs-nee'></i>";
    }
}
</script>

HTML：

<ul class="benkopte-specs-list">
<li><span class="specs-info-front">WiFi</span>Ja <span class="specs-info-last">WiFi</span></li>
</ul>

Answer 1

您真正想要的是将Ja，Yes等词替换为<i>对应词。以下是您将如何实现这一目标：

var allElements = document.body.getElementsByClassName("benkopte-specs-list");
for(var i = 0; i < allElements.length; i++) {
    var text = allElements[i].innerHTML;
    
    console.log(text)
    if (text.indexOf('Ja') > -1) {
        allElements[i].innerHTML = text.replace("Ja", "<i class='icon-specs-ja'></i>");
    }
    if (text.indexOf('Yes') > -1) {
        allElements[i].innerHTML = text.replace("Yes", "<i class='icon-specs-ja'></i>");
    }
    if (text.indexOf('Nee') > -1) {
        allElements[i].innerHTML = text.replace("Nee", "<i class='icon-specs-ja'></i>");
    }
    if (text.indexOf('No') > -1) {
        allElements[i].innerHTML = text.replace("No", "<i class='icon-specs-ja'></i>");
    }
}

<ul class="benkopte-specs-list">
  <li><span class="specs-info-front">WiFi</span>Ja <span class="specs-info-last">WiFi</span></li>
</ul>

此处，Ja已被html中的<i class='icon-specs-ja'></i>取代。

Answer 2

您正在测试innerHTML 是否等于值，而不是检查它是否“包含”该值。

另外，你不是在追问正确的事情。您应该查询要测试的文本之前的span，而不是ul，因为这会导致您获取它包含的整个HTML字符串，而这不是您想要的。

接下来，getElementsByClassName()肯定有效，但由于它返回“实时”节点列表，因此使用它会对性能产生影响。通常，请改用querySelectorAll()。

此外，由于您似乎想要“Yes”和“Ja”以及“No”和“Nee”的相同输出，您可以将if/then语句压缩为两个。

// Search for the span that comes right before the text you want
var allElements = document.querySelectorAll(".benkopte-specs-list .specs-info-front");
for(var i = 0; i < allElements.length; i++) {

    // Get the text (not HTML) of the following node
    var text = allElements[i].nextSibling.textContent;
    
    console.log("Old content was: " + allElements[i].nextSibling.textContent);
    
    // Even now that the correct text is being searched, it may be better to check for
    // contents than an exact match as you also have spaces in the text
    // string.indexOf(pattern) returns -1 if the pattern is not found within the string
    
    // There are two values that will result in one class, so test for either of them
    if (text.indexOf('Ja') > -1 || text.indexOf('Yes') > -1) {
        allElements[i].nextSibling.innerHTML = "<i class='icon-specs-ja'>" + text + "</i>";
    }

    // There are two values that will result in one class, so test for either of them
    if (text.indexOf('Nee') > -1 || text.indexOf('No') > -1) {
        allElements[i].nextSibling.innerHTML = "<i class='icon-specs-nee'>" + text + "</i>";
    }

    console.log("New content is: " + allElements[i].nextSibling.innerHTML);
}

<ul class="benkopte-specs-list">
  <li><span class="specs-info-front">WiFi</span>Ja <span class="specs-info-last">WiFi</span></li>
</ul>

脚本更改内部HTML不起作用

2 个答案: