Question

我有一个网页，它使用带有额外信息的弹出框的JQuery ToolTips插件。这一切都很好，没有任何问题。

然而，为了使弹出框完美地工作，我需要给出问题标题中的元素，详细说明我想要弹出窗口说的内容。如果我可以直接更改HTML，这很简单，但我只能通过JS来实现。更让我烦恼的是，工具提示会根据元素innerHTML中的内容进行更改，但元素本身没有ID。但它的父母却有一个ID。

所以我一直试图通过父节点访问子节点，读取它的innerHTML，将它与几个if语句进行比较，然后根据这个innerHTML将标题应用于父节点。

这是我的代码：

for(var i = 1; i<5; i++){
        var q = document.getElementById("cell.0."+i);
        console.log(i+" "+q);
        if(q.children[0].innerHtml === "some text1"){
            q.setAttribute('title', 'Other text1');
        }
        else if(q.children[0].innerHtml === "some text2"){
            q.setAttribute('title', 'Other text2');
        }
        else if(q.children[0].innerHtml === "some text3"){
            q.setAttribute('title', 'Other text3');
        }
        else if(q.children[0].innerHtml === "some text4"){
            q.setAttribute('title', 'Other text4');
        }
    }

随之而来的JSFiddle让它更清晰：http://jsfiddle.net/qxb58/7/

注意：JSFiddle使用一个按钮，但我正在使用的实际函数将在页面加载时。

我一直在测试控制台中的每一行。从我可以告诉所有在控制台工作中可立即测试的语句（例如q.children [0] .innerHtml ===“some text4”和q.setAttribute（'title'，'Other text4'）;）。但是当进入for循环时它似乎不起作用。

请注意，它不太可能是HTML错误，因为我的HTML是自动生成并且有效。如果小提琴中的HTML出现错误，那就是我对HTML的废话。谢谢你指出来了！

编辑：解决方案：innerHTML不是innerHtml。抱歉这个愚蠢的错误。谢谢你的帮助！

Answer 1

在HTML中，ID区分大小写。您可以将它们设置为小写，并使用大写C在JS中查询它们。

以这种方式纠正：

q = document.getElementById("cell.0."+i);
                             ^ lower case now

这不会解决问题，只是多步调试之一。以下是解决问题的进一步答案。

编辑：这个现在有效。我更正了大写C并将innerHtml替换为innerText。

顺便说一下，innerHtml是这样编写的：

innerHTML
     ^^^^ all upper case

复制＆amp;粘贴解决方案：

function changer()
{
    for (var i = 1; i < 5; i++)
    {
        var q = document.getElementById("cell.0." + i);

        if (q.children[0].innerText === "some text1") {
            q.setAttribute('title', 'Other text1');
        } else if (q.children[0].innerText === "some text2") {
            q.setAttribute('title', 'Other text2');
        } else if (q.children[0].innerText === "some text3") {
            q.setAttribute('title', 'Other text3');
        } else if (q.children[0].innerText === "some text4") {
            q.setAttribute('title', 'Other text4');
        }
    }
}

Answer 2

除了您的案例问题，您还遇到HTML无效的问题。将您的<tr>括起来并且有效：

http://jsfiddle.net/qxb58/7/

<table>
    <tr>
        <td id="cell.0.1"> <span>some text1</span>

        </td>
    </tr>doc
    <br/>
    <tr>
        <td id="cell.0.2"> <span>some text2</span>

        </td>
    </tr>
    <br/>
    <tr>
        <td id="cell.0.3"> <span>some text3</span>

        </td>
    </tr>
    <br/>
    <tr>
        <td id="cell.0.4"> <span>some text4</span>

        </td>
    </tr>
</table>
<br/>
<br/>
<button onClick="changer()">Changing</button>

仍然不是100％正确，但正在工作。

哦，还有，你需要设置你的小提琴，把你的脚本放在头上。你在onload中有它，因为处理程序不会被定义，所以无法工作。

编辑：对不起，错过了实际设置标题的部分。您的问题是，您需要innerText而不是innerHTML。见这里：http://jsfiddle.net/qxb58/15/

最后：如果您使用jQuery插件作为工具提示，为什么不使用jQuery而不是getElementById

Answer 3

您正在执行javascript onload，这意味着当使用函数changer()创建DOM时，它当时是未定义的。您还在寻找属性innerHtml而不是innerHTML。属性具有案例敏感性。通过这两个更改，它可以正常工作：

JSFiddle

使用子节点innerHTML更改元素的标题

3 个答案: