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输入的HTML：（某些行已被删除，不会成为垃圾邮件）

<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

我想是因为两次单击都位于ame元素上，因此当您要滚动单击时，单击的第一个定义会覆盖第二个。

尝试此代码：

Glide

$('.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;
}

Answer 2

之所以发生这种情况，是因为您的代码始终具有第一个功能（第一次单击），因为这是主要功能，只是按钮上有其他一些类。您可以检查按钮是否具有您的btn-next类，然后进行检查。您可以尝试以下方法：

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

    if($(this).hasClass('btn-next')){
        $('html, body').animate({
            scrollTop: $("#section-contact").offset().top-100
        }, 800);
    }else{
        $(this).css('backgroundColor','white').addClass('btn-next');
        $('.fcprice').attr("placeholder", "Online tréner za 70 € s DPH");
    }
});

第一次单击时添加课程，然后在第二次单击按钮上向下滚动

2 个答案: