首页 > jquery如何在当前页面 单击手机找回按钮 把父元素hidden,再去掉手机步骤(2)的hidden?

jquery如何在当前页面 单击手机找回按钮 把父元素hidden,再去掉手机步骤(2)的hidden?

以下我写的 jq不对。还望大神帮我纠正下添加我想要的效果。

$("#J_phone").click(function(){  //这是按钮块
   $(".forget_main").find(".forget_main").hide().next().removeClass("hidden");
    $(".icon-forget").addClass("icon-forge-2");
})

我想在单击按钮的时候把手机步骤(1)隐藏,然后手机步骤 (2) show就出来。
再单击下一步的按钮 第二步的hide().第三步就slow()。

<!--手机步骤(1)-->
<div class="forget_main">
    <div class="form_1">
        <div class="qipao">
            <div class="tag">
                <div class="arrow">
                    <em>◆</em><span>◆</span>
                </div>
                <span>请输入您的登录名</span>
            </div>
        </div>
    </div>
    <div class="form_2">
        <div class="qipao">
            <div class="tag">
                <div class="arrow">
                    <em>◆</em><span>◆</span>
                </div>
                <span>请输入正确的登陆名</span>
            </div>
        </div>
    </div>
    <div class="logo_name">
        <span class="f14">登陆名: </span>
        <input type="text" placeholder="请输入手机号/邮箱/微信" id="pass" onclick="pass()">
    </div>
    <div class="logo_code">
        <span class="f14">验证码:</span>
        <input type="text">
        <a href="">
            <img src="res/img/code_03.jpg" alt="">
            <span class="f14">换一张</span>
        </a>
        <div class="weichat_code">
             <div class="wecode">微信二维码</div>
            <div class="wecode1"><img src="res/img/images/weichat2_03.jpg" alt=""></div>
            <div class="wecode2">扫二维码找回</div>
        </div>
        <div class="form-back">
            <button class="phone_b" id="J_phone">手机找回</button>
           <button class="email_b">邮箱找回</button>
        </div>
    </div>
</div>
<!--手机步骤(2)-->
<div class="forget_main p79 hidden">
     <div class="sms"> 短信已发送!</div>
      <p class="text_1">今日开抢网已向您的手机 <span>186*****383 </span> 发送了验证码短信,请您及时查看。</p>
        <div class="text_2">
            <span>  短信验证码 :</span>
            <input type="text" placeholder="请输入短信验证码">
            <button>获取验证码</button>
        </div>
      <div class="ht col-lg-offset-4">
        <button class="confirm">确定</button>
      </div>
</div>
<!--邮箱步骤(2)-->
<div class="forget_main p79 hidden">
    <div class="sms"> 邮件已发送!</div>
    <p class="text_1">验证邮件已发送至您的邮箱 <span>12*****87@qq.com,</span> 请点击邮件中的链接重置您的密码。
        请在24小时内通过邮件中的链接重设密码。</p>
    <div class="ht col-lg-offset-4">
        <button class="confirm">去邮箱查看</button>
        <button class="resending">去邮箱查看</button>
    </div>
</div>
<!--微信(2)-->
<div class="forget_main p79 hidden">
   <div class="msm_send">信息已发送!
   </div>
   <div class="msm_send f12"> 您的账号资料已发送至您的微信,请勿泄漏给他人,请牢记!</div>
    <div class="ht lf">
        <button class="confirm">抢购去</button>
    </div>
</div>
<!--设置新密码(3)-->
<div class="forget_main hidden">
    <div class="new_pss">
      <span class="w84"> 新密码:</span>
        <input type="text" placeholder="由8-20位字母,数字和符号组合">
    </div>
    <div class="safe_level">
        <span class="w84">  安全级别: </span>
            <i class="safe_level_l "></i>  <!--弱-->
            <i class="safe_level_l2 "></i>    <!--中-->
            <i class="safe_level_l3"></i><!--强-->
    </div>
    <div class="new_pss">
        <span class="w84">   确认密码:</span>
            <input type="text" placeholder="请再次输入上面的密码">
    </div>
    <div class="ht col-lg-offset-4">
        <button class="confirm">确定</button>
    </div>
</div>
<!--成功(4)-->
<div class="forget_main hidden">
    <p class="congratulate">
    恭喜您,您的新密码已设置成功,请您牢记!为了保证您的购物安全,<br>
    请不要轻易泄露给他人,建议您定期更改密码以保护账户安全。
    </p>
    <div class="ht col-lg-offset-4">
        <button class="confirm">确定</button>
    </div>
</div>

  1. 设定 .forget_main 默认为不可见.

  2. 设置 .forget_main.show 为可见状态.

  3. jQuery 通过 .forget_main.show 找到当前显示的这个, 然后根据需要决定是用 next/prev 来找它下一个/上一个节点, 然后切换样式, 实现显示/隐藏.

<meta charset="utf-8"/>
<style type="text/css">
.forget_main{display:none;}
.forget_main.show{display:block;}
</style>
<div>
    <!--手机步骤(1)-->
    <div class="forget_main show">
        <div class="form_1">
            <div class="qipao">
                <div class="tag">
                    <div class="arrow">
                        <em>◆</em><span>◆</span>
                    </div>
                    <span>请输入您的登录名</span>
                </div>
            </div>
        </div>
        <div class="form_2">
            <div class="qipao">
                <div class="tag">
                    <div class="arrow">
                        <em>◆</em><span>◆</span>
                    </div>
                    <span>请输入正确的登陆名</span>
                </div>
            </div>
        </div>
        <div class="logo_name">
            <span class="f14">登陆名: </span>
            <input type="text" placeholder="请输入手机号/邮箱/微信" id="pass" onclick="pass()">
        </div>
        <div class="logo_code">
            <span class="f14">验证码:</span>
            <input type="text">
            <a href="">
                <img src="res/img/code_03.jpg" alt="">
                <span class="f14">换一张</span>
            </a>
            <div class="weichat_code">
                 <div class="wecode">微信二维码</div>
                <div class="wecode1"><img src="res/img/images/weichat2_03.jpg" alt=""></div>
                <div class="wecode2">扫二维码找回</div>
            </div>
            <div class="form-back">
                <button class="phone_b" id="J_phone">手机找回</button>
               <button class="email_b">邮箱找回</button>
            </div>
        </div>
    </div>
    <!--手机步骤(2)-->
    <div class="forget_main p79">
         <div class="sms"> 短信已发送!</div>
          <p class="text_1">今日开抢网已向您的手机 <span>186*****383 </span> 发送了验证码短信,请您及时查看。</p>
            <div class="text_2">
                <span>  短信验证码 :</span>
                <input type="text" placeholder="请输入短信验证码">
                <button>获取验证码</button>
            </div>
          <div class="ht col-lg-offset-4">
            <button class="confirm">确定</button>
          </div>
    </div>
    <!--邮箱步骤(2)-->
    <div class="forget_main p79">
        <div class="sms"> 邮件已发送!</div>
        <p class="text_1">验证邮件已发送至您的邮箱 <span>12*****87@qq.com,</span> 请点击邮件中的链接重置您的密码。
            请在24小时内通过邮件中的链接重设密码。</p>
        <div class="ht col-lg-offset-4">
            <button class="confirm">去邮箱查看</button>
            <button class="resending">去邮箱查看</button>
        </div>
    </div>
    <!--微信(2)-->
    <div class="forget_main p79">
       <div class="msm_send">信息已发送!
       </div>
       <div class="msm_send f12"> 您的账号资料已发送至您的微信,请勿泄漏给他人,请牢记!</div>
        <div class="ht lf">
            <button class="confirm">抢购去</button>
        </div>
    </div>
    <!--设置新密码(3)-->
    <div class="forget_main">
        <div class="new_pss">
          <span class="w84"> 新密码:</span>
            <input type="text" placeholder="由8-20位字母,数字和符号组合">
        </div>
        <div class="safe_level">
            <span class="w84">  安全级别: </span>
                <i class="safe_level_l "></i>  <!--弱-->
                <i class="safe_level_l2 "></i>    <!--中-->
                <i class="safe_level_l3"></i><!--强-->
        </div>
        <div class="new_pss">
            <span class="w84">   确认密码:</span>
                <input type="text" placeholder="请再次输入上面的密码">
        </div>
        <div class="ht col-lg-offset-4">
            <button class="confirm">确定</button>
        </div>
    </div>
    <!--成功(4)-->
    <div class="forget_main">
        <p class="congratulate">
        恭喜您,您的新密码已设置成功,请您牢记!为了保证您的购物安全,<br>
        请不要轻易泄露给他人,建议您定期更改密码以保护账户安全。
        </p>
        <div class="ht col-lg-offset-4">
            <button class="confirm">确定</button>
        </div>
    </div>
</div>

<hr/>
<h2>这里的只是做演示, 你可以在你需要的时候调用 Go 方法, 去实现向后/前跳</h2>
<input type="button" value="Prev" id="Prev" />
<input type="button" value="Next" id="Next" />


<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
    (function(){
        var Go = function (direction){
            var current = $('.forget_main.show'),
                target = current[direction]();

            if(target.length === 0){
                return;
            }

            //隐藏当前的
            current.removeClass('show');
            target.addClass('show');
        };

        //为了安全期间 Go 函数定义为局部变量, 请将你的代码写在这个代码块内,
        //以便可以访问 Go 这个函数.

        $('#Prev').click(function(){
            Go('prev');
        });

        $('#Next').click(function(){
            Go('next');
        });

    })();

</script>

试试这个可不可以

$("#J_phone").click(function(){  //这是按钮块
   var parent = $(this).parents(".forget_main");
   var next=parent.next(".forget_main");
   parent.addClass("hidden");
   next.removeClass("hidden");
   $(".icon-forget").addClass("icon-forge-2");
})
【热门文章】
【热门文章】