通过单击具有相同css类的不同元素，将css类添加到其中一个元素中，但使用jQuery将其从其他元素中删除。
通过单击具有相同css类的不同元素，将css类添加到其中一个元素中，但使用jQuery将其从其他元素中删除。
提问于 2021-05-31 23:55:52
我想在每次单击每个div并使用jQuery设置活动的样式时，将特定divs元素的文本添加到文本区中：
下面是我的代码：
$('.msg-item-row').each(function() {
$(this).click(function(){
$(this).addClass('selected-msg');
var msgtextslot = $(this).text();
$('#message').val(msgtextslot);
//alert (msgtextslot);
});
});.msg-item-row {
background:#f3f5f8;
color:#383838;
padding:10px;
margin-bottom:10px;
cursor:pointer;
transition: ease-in-out 0.2s;
font-size:0.8rem;
}
#message {
width:90%;
padding:10px;
}
.selected-msg {
background:red;
color:#fff;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div class="list-msg-wrapper">
<div class="msg-item-row"> Hi, i have some questions about this product. </div>
<div class="msg-item-row"> What is the most favorited color in the world? </div>
<div class="msg-item-row"> Bla bla bla bla bla</div>
</div>
<textarea id="message" name="message" rows="3" placeholder="Enter your message..."></textarea>
代码运行得很好，当我单击每个div时，我可以通过添加类".selected-msg“来设置它的样式。我的问题是，我不知道如何从其他两个未选中的div中删除类
回答 1
Stack Overflow用户
回答已采纳
发布于 2021-05-31 23:59:45
您可以使用jQuery的removeClass从所有按钮中删除类，然后将类添加到一个所需的按钮：
$('.msg-item-row').each(function() {
$(this).click(function(){
$('.msg-item-row').removeClass('selected-msg');
$(this).addClass('selected-msg');
var msgtextslot = $(this).text();
$('#message').val(msgtextslot);
});
});.msg-item-row {
background:#f3f5f8;
color:#383838;
padding:10px;
margin-bottom:10px;
cursor:pointer;
transition: ease-in-out 0.2s;
font-size:0.8rem;
}
#message {
width:90%;
padding:10px;
}
.selected-msg {
background:red;
color:#fff;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div class="list-msg-wrapper">
<div class="msg-item-row"> Hi, i have some questions about this product. </div>
<div class="msg-item-row"> What is the most favorited color in the world? </div>
<div class="msg-item-row"> Bla bla bla bla bla</div>
</div>
<textarea id="message" name="message" rows="3" placeholder="Enter your message..."></textarea>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/67776979
复制相关文章
相似问题
腾讯云开发者
