jQuery / Javascript - else if 语句未达到 else if答案

【问题标题】：jQuery / Javascript - else if statement not reaching else ifjQuery / Javascript - else if 语句未达到 else if
【发布时间】：2023-10-09 00:55:01
【问题描述】：

我对 jQuery / javascript 比较陌生，但我遇到了看起来很简单的问题，但我看不出有什么问题。对不起，如果这最终很简单，但我已经搜索了负载但没有结束。

我试图让各种 div 淡入或淡出，具体取决于它们是否“可见”。当单击“下一步”箭头时，这些 div 实际上是我想要前进的“页面”。

这是我的 jQuery：

$(document).ready(function(){    
   $("#page1 > div").hide();
   $("#page2 > div").hide();
   $("#page3 > div").hide();

   $("#page1 > div").fadeIn(800);

   $("#NextArrow").click(function(){
      if($("#page1").is(":visible")){
         $("#page1 > div").fadeOut(800);
         $("#page2 > div").fadeIn(800);
      }
      else if($("#page2").is(":visible")){
         $("#page2 > div").fadeOut(800);
         $("#page3 > div").fadeIn(800);
      }
      else {
         alert("no page");
      }
   })
})

这里是html：

<table id="MainTable" width="765" border="0" align="center">
    <tr>
        <td align="left" valign="top" style="min-height:400px; padding-left:10px; padding-top:10px">
            <div id="page1" style="position:absolute">
                <div id="p1Title">Introduction</div>
                <p></p>
                <div id="p1Detail">....detail.....</div>
            </div>
            <div id="page2" style="position:absolute">
                <div id="p2Title">Introduction - continued</div>
                <p></p>
                <div id="p2Detail">....detail.....</div>
            </div>
            <div id="page3" style="position:absolute">
                <div id="p3Title">Members</div>
                <p></p>
                <div id="p3Detail">....detail.....</div>
            </div>
        </td>
    </tr>
    <tr>
        <td align="right">
            <div id="NextArrow"></div>
        </td>
    </tr>
</table>

这是“NextArrow”的css：

#NextArrow
{
  width:120px;
  height:34px;
  background-image:url('NextArrow.gif');
}

#NextArrow:hover
{
  background-image:url('NextArrowHover.gif');
}

所以这就是问题所在。当我单击“NextArrow”div 时，它会按预期淡出“page1”div 并淡入“page2”div。但是，当我再次单击它时，什么也没有发生，甚至没有收到“无页面”警报。

【问题讨论】：

根据代码的工作方式，可能是一个简单的情况，您只需单击#nextarrow 即可快速播放动画，并在完成最后一个动画之前触发
这不是问题，我创建了一个小提琴：jsfiddle.net/CKkpC
查看文档，它实际上声明了Elements with visibility: hidden or opacity: 0 are considered visible。所以你所有的 div 一开始都被认为是可见的
您使用的是哪个浏览器？如果 Chrome 或 Firefox 在单击时在检查器/firebug 中触发任何错误？
将警报放入其他两个代码块。我敢打赌以上是正确的，并且您每次都遇到代码块 #1。

标签： javascript jquery

【解决方案1】：

您的回答是一个微不足道的逻辑问题。 fadeOut 淡出元素 - 而不是它的父元素。 :visible 检查检查您指定的容器的状态 - 而不是它的父容器。

您正在淡出#page1 > div 而不是#page1。因此，虽然为空，但您的 #page1 仍然可见。因此，无论您的页面处于何种状态，$('#page1').is(':visible') 始终为真。

考虑更改淡出/淡入淡出调用以淡化页面 ID 而不是它们包含的 div。

【讨论】：

好的，好像是这样。因此，我调整了我的 jquery 以包含#page 元素以及每个fadeIn 和fadeOut 的'#page > div' 元素。顺便说一句，反应非常快。这是我第一次使用它，我想我必须等待几个小时。印象深刻！
@sr28：根据您的问题难度，答案可能需要一段时间。但是，最好让不止一个人尝试解决问题。此外，隐藏容器还会隐藏所有继承不透明度的元素，而不会将它们标记为不可见。所以你只需要隐藏page1，而不是div。让您的生活更轻松。任何时候！ :-)

【解决方案2】：

问题是您正在检查 #page1 是否可见，如果是，则您正在淡出 inside 的 <div> 元素，这不会使 @987654323 @隐形。

试试这个：

if($("#page1").is(":visible")){
    $("#page1").fadeOut(800);
    $("#page2").fadeIn(800);
}

【讨论】：