1

メッセージ受信ボックスを作成していますが、選択したメッセージ (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>
4

3 に答える 3

7

関数を作るだけです：

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

使用することもできますtoggleClass

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

JSFiddle:

http://jsfiddle.net/hwgTr/

于 2013-05-20T15:09:25.723 に答える
0

このようにすることもできます：

 $("div").click(function() {
      $(this).addClass('message-selected').siblings().removeClass('message-selected'); 
  });
于 2013-05-20T15:23:53.760 に答える
0

複数の要素を変更したいので、「.message-background」をクリックして設定し、その中のすべての css に影響するクラスを切り替えます。

Javascript:

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

message-background 内の要素は、そこから選択された状態を継承できるようになりました。CSS:

.Message-Background-Selected {
    border:1px solid red;
}
.Message-Background-Selected .Message-Title {
    color:red;
}
.Message-Background-Selected .Message-Text {
    color:red;
}
于 2013-05-20T15:31:03.347 に答える