Question

我对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'按预期分出并在'page2'div中消失。但是，当我再次点击它时，没有任何反应，甚至没有得到“无页面”警报。

Answer 1

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

您正逐渐淡出#page1 > div而非#page1。因此，虽然为空，但您的#page1仍然可见。因此，无论您的网页状态如何，$('#page1').is(':visible')始终为真。

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

Answer 2

问题是，您正在检查#page1是否可见，如果是，您正在逐渐淡出}内的<{1}}元素使<div>不可见。

请改为尝试：

#page1

jQuery / Javascript - 如果语句没有到达else，则为if

2 个答案: