Jquery在单击按钮时更改切换开关CSS类

Posted 2023-05-09

【中文标题】Jquery在单击按钮时更改切换开关CSS类

【英文标题】：Jquery change togle switcher CSS class on clicking a button

【发布时间】：2021-08-10 03:05:09

【问题描述】：

我有一个正常状态的切换切换器，显示按月计费的价格，当我单击切换器时，它会更改为显示按年计费的活动类：

<div class="premium-content-toggle-switcher">
            <div class="premium-content-toggle-heading-one">
                <h3>Billed Monthly</h3>
            </div>
        <div class="premium-content-toggle-button">
            <label class="premium-content-toggle-switch-label">
                <input class="premium-content-toggle-switch premium-content-toggle-switch-normal elementor-clickable" type="checkbox">
                <span class="premium-content-toggle-switch-control elementor-clickable"></span>
            </label>
        </div>
            <div class="premium-content-toggle-heading-two">
                <h3>Billed Yearly</h3>
            </div>
        
                    
    </div>

我想要这个切换器中的那个appart，切换器可以通过点击不同的按钮从普通类切换到活动：

<a href="#" class="elementor-button-link elementor-button elementor-size-sm" role="button" id="changeButton">
                    <span class="elementor-button-content-wrapper">
                    <span class="elementor-button-text">Click here</span>
    </span>
                </a>

我试过了：

   $(function()
    $('.changeButton').on('click', function()
        $(this).toggleClass('premium-content-toggle-switch-active')
    );
);

但是好像不行，怎么做才能让按钮改变切换器的css类呢？

【问题讨论】：

你没有使用类 changeButton 的任何元素

在你的 js $("#changeButton") 中做了一个小改动，因为 "changeButton" 不是类使用 "#" 而不是 "."

【参考方案1】：

试试

$('#changeButton').on('click', function() 
    $('.premium-content').toggleClass('premium-content-toggle-switch-active');
);

侦听器应附加到“#changeButton”id 选择器；在处理程序中，您选择“.premium-content”类元素并切换它们的 ...-switch-active 类。

【参考方案2】：

使用这个修改后的形式：

<div id="selector" class="premium-content-toggle-switcher ">
</div>

$(function()
    $('#changeButton').on('click', function()
    $("#selector").toggleClass('premium-content-toggle-switcher premium-content-toggle- 
    switcher-active');
    );
);