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>
阅读 2.8k
1 个回答

试试这个可不可以

$("#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");
})
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进