jQuery切换开关无法切换值：POST请求仅发送单一值问题排查

你的问题核心在于**toggleClass()方法的返回值特性**，以及错误的状态判断逻辑：

• $(this).toggleClass("switchOn")返回的是当前jQuery对象，而非布尔值。在JavaScript条件判断中，对象永远被视为true，所以你的三元表达式? 'pagination' : 'infinite'永远会执行第一个分支，导致POST请求始终发送pagination。
• 另外，你的开关是基于CSS类实现的自定义控件（不是<input type="checkbox">），所以prop("checked")完全不生效——因为<div>元素根本没有checked属性。

修正后的代码方案 #

我们需要先完成类的切换，再通过hasClass()方法判断当前状态，以此决定发送的值：

$(document).ready(function() {
    $('.switch').click(function() {
        // 先执行类切换操作
        $(this).toggleClass("switchOn");
        // 再判断当前是否拥有switchOn类，决定要发送的值
        const sendValue = $(this).hasClass("switchOn") ? 'pagination' : 'infinite';
        
        $.ajax({
            type: "POST",
            url: "https://-------.x.pipedream.net", // 测试用临时端点
            data: {
                value: sendValue
            },
            success: function(data) {
                // 可选：更新页面上的状态提示，让用户直观看到当前切换结果
                const currentText = sendValue === 'pagination' ? 'Paged' : 'Infinite';
                $('.switch-label b:last').text(currentText);
            }
        });
    });
});

为什么这样修改有效？ #

1. 先切换再判断：toggleClass()会先完成类的添加/移除操作，之后用hasClass()可以准确获取当前控件的状态。
2. 匹配自定义控件的状态逻辑：你的开关是通过switchOn类来标记激活状态的，所以用hasClass("switchOn")是最直接准确的判断方式。
3. 额外优化（可选）：在success回调里更新页面上的Current: <b>Infinite</b>文本，让用户能直观看到当前状态，提升交互体验。

验证逻辑 #

• 初始状态：.switch没有switchOn类，点击后添加类，发送pagination，同时页面提示更新为Current: Paged。
• 再次点击：移除switchOn类，发送infinite，页面提示更新为Current: Infinite。

这样就能实现切换时交替发送两个值的需求了。

内容的提问来源于stack exchange，提问作者WLFree