JavaScript / JQuery 隐藏和显示

Question

由于某种原因，我的jQuery隐藏和显示功能不起作用。它似乎可以工作，但项目没有显示在页面上。可能是父元素具有相对位置或显示为none的情况，但我找不到任何问题。代码如下：

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

无

无

无

无

无

块

- The Hawk

---

你想要达成什么目标？ - j08691

你分别尝试过 .show() 和 .hide() 吗？ - Ted Nyberg

我建议使用.toggle()而不是.hide()和.show()。$().toggle()会自动确定对象是否可见。 - kecer

我不确定错误在哪里：http://jsfiddle.net/eL0kh42r/ - winhowes

代码是正确的。样式被覆盖了。我让它更具体：$（“.wrapper .main div#newsItem”+ newsItem）.show(); - The Hawk

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();
 }

注意：除第一个外，样式设置在所有元素上是为了让切换功能可以改变它们。

- abc123