jquery - getElementsByClassName 的倒计时错误

Question

我在使用 时出错getElementsByClassName，它没有向我显示您在课堂上想要的结果。当我使用getElementbyID与班级一起顺利工作但没有办法的时候，我在控制台中没有错误我不明白为什么不显示结果。

document.getElementsByClassName('countdown_product').innerHTML = '<span class="texte_countdown" style="text-align:center;"></span><br/>';
document.getElementsByClassName('countdown_product').innerHTML += '<span class="days">'+ days+ '</span>';
document.getElementsByClassName('countdown_product').innerHTML += '<span class="hours"><span class="pts_countdown">:</span>' + hours+ '</span>';
document.getElementsByClassName('countdown_product').innerHTML += '<span class="minutes"><span class="pts_countdown">:</span>' + minutes+ '</span>';
document.getElementsByClassName('countdown_product').innerHTML += '<span class="seconds"><span class="pts_countdown">:</span>' + seconds+ '</span>';
document.getElementsByClassName('countdown_product').innerHTML += '<span class="milliseconds"><span class="pts_countdown">:</span>' + milliseconds+ ' </span>'

我的小提琴

Answer 1

getElementsByClassName返回所选 DOM Element 对象的数组，您应该遍历所选元素并更新innerHTML每个所选元素。您正在向innerHTML返回的 Array 对象添加一个属性，该属性当然不会引发错误，但不会达到您的预期。

var elems = document.getElementsByClassName('countdown_product');
for ( var i = 0; i < elems.length; i++ ) {
   elems[i].innerHTML = '<span class="texte_countdown" style="text-align:center;">text</span>';
}

当您加载 jQuery 时，您可以通过 className 和 use htmlorappend方法选择元素，jQueryeach在后台使用方法并innerHTML为您更新属性。

$('.countdown_product').html('<element>content</element>');