由于某种原因,我的jQuery隐藏和显示功能不起作用。它似乎可以工作,但项目没有显示在页面上。可能是父元素具有相对位置或显示为none的情况,但我找不到任何问题。代码如下:
HTML:
HTML:
<div id="newsItem1">
<h4><a href="/news">News Title 1</a></h4><h4>April 6, 2015</h4>
<p>Text here</p>
</div>
<div id="newsItem2">
<h4><a href="/news">News Title 1</a></h4><h4>April 6, 2015</h4>
<p>Text here</p>
</div>
CSS:
#newsItem1, #newsItem2 {
display:none;
}
JS:
setInterval(NextNewsItem, 8000);
var newsItem = 0;
var numNewsItems = 2;
function NextNewsItem() {
newsItem++;
if (newsItem > numNewsItems) {
newsItem = 1;
}
console.log(newsItem);
for (i = 1; i <= numNewsItems; i++) {
console.log($("#newsItem" + i).css('display'));
$("#newsItem" + i).hide();
console.log($("#newsItem" + i).css('display'));
}
console.log($("#newsItem" + newsItem).css('display'));
$("#newsItem" + newsItem).show();
console.log($("#newsItem" + newsItem).css('display'));
}
第一次迭代显示:
1
无
无
无
无
无
块