Javascript/JQuery 隐藏和显示

Question

出于某种原因，我的 jQuery 隐藏和显示无法正常工作。它似乎有效，但元素没有显示在页面上。可能它可能是具有相对位置或不显示的父元素，但我找不到任何东西。代码如下所示:

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

none

none

none

none

none

block

Answer 1

jsFiddle

这对我来说似乎很好用

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 2</a></h4><h4>April 6, 2015</h4>
    <p>Text here</p>
</div>

JS

 setInterval(NextNewsItem, 1000);

 var newsItem = 0;
 var numNewsItems = 2;

 function NextNewsItem() {
     newsItem++;

     if (newsItem > numNewsItems) {
         newsItem = 1;
     }

     for (i = 1; i <= numNewsItems; i++) {
         $("#newsItem" + i).hide();
     }

     $("#newsItem" + newsItem).show();
 }

注意:在除第一个以外的所有样式上设置样式的原因是让切换更改它们。