Jquery 构建交换机功能

我正在尝试构建一个简单的切换器功能

首先，以下代码不起作用。我做错了什么

其次，我可以使用if语句来构建它，而不是使用两个不同但相似的函数

编辑：我看了Syon的例子并做了一些修改。现在发生的事情是，如果最初每个人都被选中，并且如果我只点击朋友，“selected”类被正确地分配给朋友，并且从所有人中删除。但如果最初只选择了“朋友”，则不会发生任何事情

    $(".switcher span").click(function(){
        $.ajax({
            type: "GET",
            url: "content/profile/index.cs.asp?Process=ChangeComm",
            success: function(data) {
            if ($(this).hasClass('public')) { 
                $(".public").addClass('selected');
                $(".limited").removeClass('selected');
            } else {
                $(".limited").addClass('selected');
                $(".public").removeClass('selected');
            }
            return false;
            },
            error: function (data) {                        
            }
        });
    });

    <style>
    .switcher { width:100%; color:white; min-height:20px; padding:5px 0; cursor:pointer; }
    .switcher .selected { font-weight:bold; background:green; }
    .switcher span { width:25%; background: black; padding:5px; border-bottom-left-radius:5px; border-bottom-right-radius:5px; border-top-left-radius:5px; border-top-right-radius:5px;   }
    .switcher span.desc { width:50%; color:black; background:white; }
    </style>
        <div class="switcher">
            <span class="desc">güncellemeler</span>
            <span class="public <% If strDisplayComm = 1 Then %>selected<% End If %>">everyone</span>
            <span class="limited <% If strDisplayComm = 0 Then %>selected<% End If %>">only friends</span>
        </div>

$（“.switcher span”）。单击（函数（）{
$.ajax({
键入：“获取”，
url:“content/profile/index.cs.asp？Process=changecom”，
成功：功能（数据）{
if（$（this.hasClass（'public'））{
$（“.public”）.addClass（'selected'）；
$（“.limited”）.removeClass（“选定”）；
}否则{
$（“.limited”）.addClass（“选定”）；
$（“.public”）.removeClass（'selected'）；
}
返回false；
},
错误：函数（数据）{
}
});
});
.switcher{宽度：100%；颜色：白色；最小高度：20px；填充：5px 0；光标：指针；}
.switcher.selected{font-weight:bold；background:green；}
.switcher span{宽度：25%；背景：黑色；填充：5px；边框左下半径：5px；边框右下半径：5px；边框左上半径：5px；边框右上半径：5px；}
.switcher span.desc{宽度：50%；颜色：黑色；背景：白色；}
居斯勒
每个人
只有朋友

试试看。您需要为css中的

.selected

=

.switcher span.selected

添加更多的特殊性，并且您可以使用if检查类名以执行不同的操作

这里有一个

CSS

.switcher {
    width: 100 %;
    color: white;
    min - height: 20px;
    margin: 5px 0;
}
.switcher span {
    padding: 5px;
    background: black;
}
.switcher span.selected {
    background: green;
}

HTML

<div class="switcher">
    <span class="public">everyone</span>
    <span class="limited">only friends</span>
</div>

---

“不起作用”是什么意思？到底哪一部分不起作用？为什么不使用单选按钮？当我点击任何一个按钮时都不会触发。在这种情况下，我不能使用单选按钮，因为它不符合设计。所选按钮没有足够的特殊性

.switcher.span

具有更高的值，因此它不会更改颜色。我查看了您的示例，并对原始代码进行了更改。现在，它部分起作用了。你能再看一次原始帖子吗？如果我在我的JSFIDLE中复制/粘贴成功函数的内容，它仍然有效。可能需要检查html或ajax是否成功。

$(".switcher span").on('click', function () {
    var $this = $(this);
    $(".switcher span").removeClass('selected');
    if ($this.hasClass('limited')) {
        //perform ajax
    } else if ($this.hasClass('public')) {
        //perform ajax
    }
    $this.addClass('selected');
});