Javascript 第一次单击时添加类，第二次单击时向下滚动按钮

第一次单击按钮将添加一个新的HTML类，如

.btn next

，第二次（以及更多次）单击后，此按钮将向下滚动到具有HTML id的部分

我试图在第一次单击时添加class

.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代码（位于底部）：

怎么了？ 非常感谢

---

编辑：我添加了HTML代码。

我想这是因为，两个click都位于ame元素上，当您想要滚动它时，click的第一个定义是覆盖第二个定义

请尝试以下代码：

$（'.btn-toggle-1'）。在（'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（“占位符”，“在线交易价格70欧元s DPH”）；
}否则{
$（'html，body'）。设置动画({
scrollTop:$（“#截面接触”）.offset（）.top-100
}, 800);
}
});
#章节联系人{
边缘顶部：1200px；
}

波顿
演示

元素，因为您的代码总是获得第一个函数（第一次单击），因为这是主要函数，只是按钮上有一些其他类。您可以检查按钮是否有您的
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");
    }
});

你能分享你的相关HTML吗，足够让我们接受你的“编码并形成一些我们可以处理的东西，这些东西可以复制-核心-你的问题？为什么我们在这里需要HMTL：动态添加，然后使用一个类-我们需要HTML来最好地建议你如何处理它-因为它是你的
点击处理程序。btn next
只附加到当前的点击处理程序。请注意，有更好/更好的方法来处理此问题，但这取决于您的HTML。如果您正在添加一个类，则没有理由这样做：
$（this）.css（'backgroundColor'，'white'）
Yes，我添加了HTML代码。在某些情况下，这可能/将失败，但如果没有HTML，则无法知道您单击了两次？在某些情况下，这可能/将失败，但如果没有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>

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