Question

我肯定在某处犯了一个错误，因此document.getElementsByClassName().innerHTML总是返回未定义。

首先我通过javascript生成<li>：

$('#list').append('<li class="box"><img class="picture" src="images/HotPromo/tagPhoto1.png"/><p class="name"><b>Name</b></p><p class="address">Address</p><p class="hidden"></p></li>');

请注意，在最右边，我有一个<p>元素，hidden类。我用它来获取 id ，我不想向我的用户显示。

这是用于在<li>上生成数据的jQuery：

$(".box").each(function () {
    var name, address, picture, id = "";
    if (i < result.length) {
        name = result[i].name;
        address = result[i].address;
        picture = result[i].boxpicture;
        id = result[i].mallid;
    }

    $(this).find(".name").html(name);
    $(this).find(".address").html(address);
    $(this).find(".picture").attr("src", picture);
    $(this).find(".hidden").html(id);
    i++;
});

我试图检查数据，并且工作正常。

现在，假设我想在用户点击上面生成的<p>中的一个时提醒隐藏的 ID <li class="box">：

$(".box").click(function () {
    alert(document.getElementsByClassName('hidden').innerHTML);
});

但是此警告始终返回“未分解”。

Answer 1

document.getElementsByClassName()返回一个nodeList，而不是一个元素！

所以它应该是：

document.getElementsByClassName('hidden')[0].innerHTML

并且您可能有更多.hidden个元素，并且只希望当前.box内的元素（在事件处理程序中为this）

this.getElementsByClassName('hidden')[0].innerHTML

但为什么不jQuery

$(".box").click(function(){
        alert( $('.hidden', this).html() );
});

document.getElementsByClassName（）。innerHTML总是返回“undefined”

1 个答案: