Question

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

首先，以下代码无效。我在这里做错了什么？

其次，我可以用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>

Answer 1

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

这是jsFiddle Example

<强> 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');
});

构建切换器功能

1 个答案: