在 html 和 javascript 中使用其他属性而不是 id

Question

我正在做一个聊天应用程序的项目，我做了一个代码，如果用户不是你的用户，它将在左侧，如果用户是你的用户，它将在右侧，我所做的代码有效，但有一个错误。问题是我这样做：

html

     <div class="msg right-msg" id="side">
      <div class="msg-img" style="background-image: url(https://image.flaticon.com/icons/svg/145/145867.svg)"></div>

      <div class="msg-bubble">
          <div class="msg-info">
          <div class="msg-info-name">{{ chat.user }}</div>
          <div class="msg-info-time"></div>
          </div>

          <div class="msg-text">{{ chat.message }}</div>
      </div>
    </div>

javascript

$( "#side" ).each(function() {
//console.log( index + ": " + $( this ));
var users = $(".msg-info-name").text()

if (users != me) {
  $("#side").removeClass("msg right-msg");
  $("#side").addClass("msg left-msg");
  };
});

问题是有很多相同的html代码（具有相同的id，class，等等），所以我意识到我只能在一个中使用id ，我使用 id，这是产品 Image of the product，它只改变了第一个的位置，所以那是行不通的。

所以我尝试使用 class 但没有改变第一个面，它什么也没改变，所以 class 不起作用。我能做什么？是循环进入所有这些的另一种方法，此外，javascript 示例正在使用 id。感谢帮助

Answer 1

对多个元素使用 class 而不是 id。

$( ".msg" ).each(function() {
  var users =  $(this).find(".msg-info-name").text();
  if (users != me) {
    $(this).removeClass("msg right-msg");
    $(this).addClass("msg left-msg");
  };
});

在 html 和 javascript 中使用其他属性而不是 id

Using other attribute instead of id in html and javascript

html

javascript

attributes