构建切换器功能

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

试试看。你需要为你的css添加更多的特征，.selected = .switcher span.selected，你可以使用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'); 
});