说明

Question

我试图给单击的类上色，但是它使每个类都上色。请检查。如果他单击4. li将其染成蓝色等。

<li class="msg-chat-message msg-user-message"><span class="msg-body">sa</span></li>
<li class="msg-chat-message msg-user-message"><span class="msg-body">sa</span></li>
<li class="msg-chat-message msg-user-message"><span class="msg-body">sa</span></li>
<li class="msg-chat-message msg-user-message"><span class="msg-body">sa</span></li>
<li class="msg-chat-message msg-user-message"><span class="msg-body">sa</span></li>

$('.msg-body').click(function() {
    $('.msg-body').css('color','red')
});

它使每个味精体着色。

Answer 1

仅选择要单击的元素：

$('.msg-body').click(function() {
    $(this).css('color','red');
});

Answer 2

由于您具有相同的班级...请使用此参考

else if (gars>10 &&bill>20)

$('.msg-body').click(function() {
   $(this).css('color','red')
});

Answer 3

其他答案非常好，它们说明了如何更改消息的CSS颜色。但是，我希望您真正想做的是将这些消息标记为已选中，以便您可以对它们进行处理...

如果您最终需要更改文本的颜色，请停止阅读！剩下的一切都是多余的...尽管您可能想考虑使用.toggleClass()来更改文本颜色。

说明

下面的代码将click事件添加到消息包装.msg-chat-message，并添加类.selected。然后，CSS样式会使用以下几行将红色的 any 子级文本突出显示为红色（这对您可能有点宽，但您可以使其更具选择性）：

.msg-chat-message.selected * {
  color: red;
}

我添加了一个删除按钮，该按钮可以删除所有选定的消息，而第二个按钮是通过添加具有新样式的类来“收藏”它们的。

然后使用以下jquery轻松遍历.selected消息：

$(".msg-chat-message.selected").each( function() {
  // Do something here
  // You can use $(this) to make changes to the individual elements
});

演示

// Add click event to the parent wrapper
$('.msg-chat-message').click(function() {

    // Add selected class to this element
    $(this).toggleClass("selected");
    
});


// Add click event to the delete button
$("#delete").click( function() {

  // Delete all the selected messages
  $(".msg-chat-message.selected").remove();
  
});



// Add click event to the delete button
$("#favourite").click( function() {

  // Cycle through each selected item
  $(".msg-chat-message.selected").each( function() {
    $(this).addClass("favourite")
  });
  
  // Deselect all the selected messages
  $(".msg-chat-message.selected").removeClass("selected");

});

.msg-chat-message.selected * {
  color: red;
}

.msg-chat-message.favourite * {
  font-weight: 700;
  text-decoration: underline;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<li class="msg-chat-message msg-user-message"><span class="msg-body">Message 1</span></li>
<li class="msg-chat-message msg-user-message"><span class="msg-body">Message 2</span></li>
<li class="msg-chat-message msg-user-message"><span class="msg-body">Message 3</span></li>
<li class="msg-chat-message msg-user-message"><span class="msg-body">Message 4</span></li>
<li class="msg-chat-message msg-user-message"><span class="msg-body">Message 5</span></li>

<button id="delete">Delete Selected</button>

<button id="favourite">Favourite message</button>

如何给点击的类着色？

3 个答案:

说明

演示