Javascript/JQuery隐藏和显示

出于某种原因，我的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>

#newsItem1, #newsItem2 {
    display:none;
}

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

JS:

<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>

#newsItem1, #newsItem2 {
    display:none;
}

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

setInterval（NextNewsItem，8000）；
var newsItem=0；
var numNewsItems=2；
函数NextNewsItem（）{
newsItem++；
如果（新闻项>numNewsItems）{
新闻项目=1；
}
console.log（新闻项）；
对于（i=1；i
这似乎对我很有效

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>


2015年4月6日
此处文本

2015年4月6日
此处文本


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

setInterval（NextNewsItem，1000）；
var newsItem=0；
var numNewsItems=2；
函数NextNewsItem（）{
newsItem++；
如果（新闻项>numNewsItems）{
新闻项目=1；
}
对于（i=1；i）您试图实现什么？您分别尝试过.show（）和.hide（）吗？我建议使用.toggle（）而不是.hide（）和.show（）。$（）.toggle（）自动确定对象是否可见，我刚刚意识到错误在哪里。你认为你从1迭代到2，但实际上一直迭代到3。在上一次迭代中，我增加到3，然后根据你的规则测试代码是否正确。样式被覆盖。我使它更具体：$(“.wrapper.main div#newsItem”+newsItem.show（）；