javascript - 在第一次单击时添加类并在第二次单击按钮时向下滚动

Question

第一次点击按钮将添加一个新的 HTML 类，如 .btn-next，第二次(以及更多次)点击后将向下滚动到带有 HTML id 的部分。

我尝试在第一次点击和第二次点击时添加类 .btn-next 这将动画并向下滚动到部分，但它不起作用。

$('.btn-toggle-1').on('click',function() {
    $('.btn-toggle-1 span').text('Idem do toho (70 €)');
    $('.tabs').slideDown();
    $(this).css('backgroundColor','white').addClass('btn-next');

    $('.fcprice').attr("placeholder", "Online tréner za 70 € s DPH");
})

$('.btn-next').click(function() {
    $('html, body').animate({
        scrollTop: $("#section-contact").offset().top-100
    }, 800);
})

按钮的 HTML 代码(在底部):

<div class="col-lg-4 col-sm-12 box box-1">
    <div class="tabs">
        <ul class="nav nav-tabs" id="myTab" role="tablist">
            <li class="nav-item"><a class="nav-link bal1 active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="false">mesačný</a></li>
            <li class="nav-item"><a class="nav-link bal2" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">2-mesačný</a></li>

        </ul>
        <div class="tab-content" id="myTabContent">
            <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
                <ul class="pl-0 tab-list">
                    <li>1x tréningový plán</li>
                    <li>stravovací program</li>
                    <li>online komunikácia počas celej spolupráce</li>
                </ul>
            </div>
            <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
                <ul class="pl-0 tab-list">
                    <li>2x tréningový plán</li>
                    <li>stravovací program</li>
                    <li>online komunikácia počas celej spolupráce</li>
                </ul>
            </div>
        </div>
    </div>

    <button class="btn btn-toggle-1 button wow fadeInUp" data-wow-delay="0.5s"><span>Chcem makať doma</span></button>
</div>

.section-contact 的 HTML，其中输入类 .fcprice 位于: (为了避免垃圾邮件，删除了一些行)

<section id="section-contact" class="page-section wow fadeIn" data-wow-duration="1.5s">
    <form action="" method="POST" class="needs-validation" novalidate>
        <input type="text" class="form-control" placeholder="MENO" name="fname" required>

        <input type="email" class="form-control" placeholder="E-MAIL" name="email" required>

        <input type="text" class="form-control" placeholder="VEK" name="age">

        <input type="text" class="form-control" value="PLATBA BANKOVÝM PREVODOM" name="payment" required>

        <input type="text" class="form-control" placeholder="PRIEZVISKO" name="lname">

        <input type="text" class="form-control" placeholder="TELEFÓN" name="phone">

        <label id="img_category_label" class="form-control field" for="img_category" data-value="">......</label>

        <input type="text" class="form-control fcprice" placeholder="" readonly disabled>

        <button type="submit" name="submit" class="btn btn-toggler"><span>Záväzne objednať</span></button>
    </form>
</section>

怎么了？ 非常感谢!

编辑:我添加了 HTML 代码。

Answer 1

我想是因为，两个点击都在同一个元素上，当您想要滚动时，点击的第一个定义会覆盖第二个。

试试这段代码:

$('.btn-toggle-1').on('click',function() {
        if (!$(this).hasClass('btn-next')) {
          $('.btn-toggle-1 span').text('Idem do toho (70 €)');
          $('.tabs').slideDown();
          $(this).css('backgroundColor','white').addClass('btn-next');
          $('.fcprice').attr("placeholder", "Online tréner za 70 € s DPH");
        } else {
          $('html, body').animate({
            scrollTop: $("#section-contact").offset().top-100
          }, 800);
        }
    });

#section-contact{
  margin-top:1200px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<button class="btn-toggle-1"><span>boton</span></button>
<p class="cprice">demo</p>
<div id="section-contact">element at scroller</div>