jquery - 如何更改最后点击的 div 上的 CSS

Question

我正在创建一个消息收件箱，并希望选中的消息（div）在选择时改变颜色。我已经这样做了，但我不确定一旦选择了另一条消息（div），如何将 div 设置回原始颜色。这是我到目前为止所拥有的，但每条消息都会得到选定的类。

<script>
function getmessage(str)  {    
$('#mb'+str).removeClass('Message-Background');
    $('#mb'+str).addClass('Message-Background-Selected');
     // alert('#mb'+str);
//   var lastmb = $('#mb'+str);
     $('#mt'+str).removeClass('Message-Title');
    $('#mt'+str).addClass('Message-Title-Selected');
    //var lastmr = $('#mt'+str);
    $('#mprev'+str).removeClass('Message-Text');
    $('#mprev'+str).addClass('Message-Text-Selected'); 
}
</script>


<div id="mb1" class="Message-Background" style="border-left:#000 solid 4px;">
<div id="mt1" class="Message-Title" onclick="getmessage(this.id)" style="float:left;">
Title 1
</div>
<div id="mprev1" class="Message-Text" style="float:left;">
Message 1
</div>
</div>
<div id="mb2" class="Message-Background" style="border-left:#000 solid 4px;">
<div id="mt2" class="Message-Title" onclick="getmessage(this.id)" style="float:left;">
Title 2
</div>
<div id="mprev2" class="Message-Text" style="float:left;">
Message 2
</div>
</div>
<div id="mb3" class="Message-Background" style="border-left:#000 solid 4px;">
<div id="mt3" class="Message-Title" onclick="getmessage(this.id)" style="float:left;">
Title 3
</div>
<div id="mprev3" class="Message-Text" style="float:left;">
Message 3
</div>
</div>

Answer 1

只需创建一个函数：

 $("div").click(function() {
      $("div").removeClass('Message-Text-Selected');
      $(this).addClass('Message-Text-Selected'); 
  });

你也可以使用toggleClass

http://api.jquery.com/toggleClass/

JSF中：

http://jsfiddle.net/hwgTr/

Answer 2

由于您想更改多个元素，因此我将单击“.message-background”并在那里切换一个影响其中所有css的类。

Javascript：

$(".message-background").click(function() {
    $(".message-background").removeClass('Message-Background-Selected');
    $(this).addClass('Message-Background-Selected');
});

现在消息背景中的元素可以从中继承选定的状态。CSS：

.Message-Background-Selected {
    border:1px solid red;
}
.Message-Background-Selected .Message-Title {
    color:red;
}
.Message-Background-Selected .Message-Text {
    color:red;
}

Answer 3

也可以这样做：

 $("div").click(function() {
      $(this).addClass('message-selected').siblings().removeClass('message-selected'); 
  });