Question

我已经构建了一个具有消息评级功能的简单聊天应用程序。我想通过隐藏相应的评级按钮来防止自我评级。因此，在Bob的屏幕上，Bob的消息旁边不应该有评级按钮。

我试图通过比较#name和#user-name来实现。如果它们相等，则应隐藏评级按钮。但看起来我的做法并不正确。

主要问题是动态创建消息div .standard-msg所以我需要像“on-dom-change”这样的东西。

每一个帮助都很适合。

$("#standard-msg").on("DOMSubtreeModified", function() {

  $('.standard-msg').each(function() {
    if ($('#name').val() == $(this).find('#user-name').text()) {
      $('button').hide();
    }
  });
});

<div id="chat-wrapper" class="wrapper">
  <div class="message-box" id="message-box">
    <div class="standard-msg">
      <button class="rating like-btn">Like</button>
      <button class="rating dislike-btn">Dislike</button><span style="color:#FF7000" class="user-name">Bob</span> : <span class="user-message">hi</span>
    </div>
    <div class="standard-msg">
      <button class="rating like-btn">Like</button>
      <button class="rating dislike-btn">Dislike</button><span style="color:#FF7000" class="user-name">Alice</span> : <span class="user-message">hello</span>
    </div>
  </div>
  <div class="panel">
    <input type="text" name="name" id="name" placeholder="Your Name" maxlength="10" />
    <input type="text" name="message" id="message" placeholder="Message" maxlength="80" />
    <button id="send-btn" class="btn">Send</button>
  </div>
</div>

Answer 1

如果在页面加载后将按钮添加到页面中，则它们不会响应引用它们的任何代码（在创建它们之前的页面中）。这是因为在创建按钮时会为按钮添加新的事件侦听器，并且它们不会在任何比它们更旧的代码上拾取。

要解决这个问题，只需在向页面添加按钮时动态添加代码即可。

e.g。

var s = "$('#standard-msg').on('DOMSubtreeModified', function() { $('.standard-msg').each(function() { if ($('#name').val() == $(this).find('#user-name').text()) { $('button').hide(); } }); }); ";

然后附加到页面

$("body").append(s);

jQuery / JS - 隐藏特定的动态创建的元素/按钮

1 个答案: