Javascript / JQuery 隐藏和显示答案

【问题标题】：Javascript / JQuery Hide and ShowJavascript / JQuery 隐藏和显示
【发布时间】：2015-04-18 03:39:20
【问题描述】：

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

没有

没有

没有

没有

没有

阻止

【问题讨论】：

你想完成什么？
你分别尝试过.show()和.hide()吗？
我建议使用 .toggle() 而不是 .hide() 和 .show()。 $().toggle() 自动判断对象是否可见
哦，我刚刚意识到错误在哪里。您认为您从 1 迭代到 2，但实际上您一直到 3。在最后一次迭代中，i 递增到 3，然后根据您的规则 i
代码正确。样式被覆盖。我说得更具体： $(".wrapper .main div#newsItem" + newsItem).show();

标签： javascript jquery html css

【解决方案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>

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

注意：除了第一个之外，所有的样式都设置的原因是让切换来改变它们。

【讨论】：