0

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

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

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

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

    $(".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>
4

1 回答 1

1

试试这个。您需要为您的 css 添加更多的特殊性 for .selected=.switcher span.selected并且您可以使用 if 来检查类名以执行不同的操作。

这是一个jsFiddle 示例

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>

jQuery

$(".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');
});
于 2013-03-21T16:48:06.020 回答