Question

我有多个div元素，它们的相似按钮具有相同的类名，我试图触发与单击的按钮有关的事件处理程序。我已经尝试过“每个” jquery函数，但是它只会触发第一个元素。我也尝试使用点击文档。我还添加了stopPropagation和preventDefault。

<div id="overview-comment-container" class="social-comment-container">
        <ul class="comments-list">
            <li class="posted-video-comment">
                <div class="comment-body-divider"></div>
                <div class="comment-list-divider" align="center" width="90%"></div>
                <div class="comment-user-details">
                    <span class="delete-comment"><img id="erase-img" title="Delete comment" src="https://www.flaticon.com/premium-icon/icons/svg/484/484662.svg"></span>
                    <span class="edit-comment"><img class="edit-img" title="Edit comment" src="https://image.flaticon.com/icons/svg/61/61456.svg"></span>
                </div>
                <div class="commentinfo-block-wrapper">
                    <div id="distinct-user-comment" contenteditable="false">Salute</div>
                </div>
                <div class="comment-buttons" style="display: none;">
                    <button id="update-button" class="social-update-button"> Update </button>
                    <button id="cancel-button" class="social-cancel-button"> Cancel </button>
                </div>
                <div class="comment-body-divider"></div>
            </li>
            <li class="posted-video-comment">
                <div class="comment-body-divider"></div>
                <div class="comment-list-divider" align="center" width="90%"></div>
                <div class="comment-user-details">
                    <span class="delete-comment"><img id="erase-img" title="Delete comment" src="https://www.flaticon.com/premium-icon/icons/svg/484/484662.svg"></span>
                    <span class="edit-comment"><img class="edit-img" title="Edit comment" src="https://image.flaticon.com/icons/svg/61/61456.svg"></span>
                </div>
                <div class="comment-block-wrapper">
                    <div id="distinct-user-comment" 
contenteditable="false">Hello</div>
                </div>
                <div class="comment-buttons" style="display: none;">
                    <button id="update-button" class="social-update-button"> Update </button>
                    <button id="cancel-button" class="social-cancel-button"> Cancel </button>
                </div>
                <div class="comment-body-divider"></div>
            </li>
        </ul>
    </div>

$( '.edit-img' ).each( function() {
        $(this).click( function(e) {

            e.stopPropagation();

            var editComment = $( '#distinct-user-comment' );
            var editCommentText = editComment.text();
            $( '.delete-comment' ).css( "visibility", "hidden" );
            $( '.edit-comment' ).css( "visibility", "hidden" );

            editComment.html( '<textarea class="editPostedComment" placeholder="'+ editCommentText + '"style="width: 60%;">'
                                + editCommentText +
                              '</textarea>' );

            $( '.editPostedComment' ).one('focus', function() {
                $( this ).text( editCommentText );
            });

            $('.comment-buttons' ).show();
        });
    });

$( '#cancel-button' ).click( function(e) {
            e.stopPropagation();
            e.preventDefault();

            var onEditComment = $( '.editPostedComment' );

            onEditComment.replaceWith('<div id="distinct-user-comment" contenteditable="false">' + onEditComment.attr('placeholder') + '</div>');
            $( '.comment-buttons' ).hide();
            $( '.delete-comment' ).css( "visibility", "visible" );
            $( '.edit-comment' ).css( "visibility", "visible" );
        });

Answer 1

仅处理第一个注释的原因是多个元素具有相同的ID。 ID应该是唯一的，并且始终总是只选择具有相同ID的第一个元素。

第二，您必须建立一个识别注释的上下文，然后引用该上下文中的所有内容。在您的情况下，它是带有“ posted-video-comment”类的“ li”标签。

每次要按类引用元素的注释时，我们将使用JQuery的最近方法（）查找父级“ li”，然后在“ li”内使用.find（）方法。

>

这是html：

<div id="overview-comment-container" class="social-comment-container" style="border-bottom: 2px solid rgb(255, 255, 255);">
  <ul class="comments-list">
    <li class="posted-video-comment">
      <div class="comment-body-divider"></div>
      <div class="comment-list-divider" align="center" width="90%"></div>
      <div class="comment-user-details">
        <span class="distinct-user-name">Tope Babz</span>
        <span class="distinct-timestamp">5 secs ago</span>
        <span class="delete-comment"><img id="erase-img" title="Delete comment" src="https://www.flaticon.com/premium-icon/icons/svg/484/484662.svg"></span>
        <span class="edit-comment"><img class="edit-img" title="Edit comment" src="https://image.flaticon.com/icons/svg/61/61456.svg"></span>
      </div>
      <div class="commentinfo-block-wrapper">
        <div class="distinct-user-comment" contenteditable="false">Salute</div>
      </div>
      <div class="comment-buttons" style="display: none;">
        <button class="social-update-button"> Update </button>
        <button class="social-cancel-button"> Cancel </button>
      </div>
      <div class="comment-body-divider"></div>
    </li>
    <li class="posted-video-comment">
      <div class="comment-body-divider"></div>
      <div class="comment-list-divider" align="center" width="90%"></div>
      <div class="comment-user-details">
        <span class="distinct-user-name">Sergio</span>
        <span class="distinct-timestamp">15 secs ago</span>
        <span class="delete-comment"><img id="erase-img" title="Delete comment" src="https://www.flaticon.com/premium-icon/icons/svg/484/484662.svg"></span>
        <span class="edit-comment"><img class="edit-img" title="Edit comment" src="https://image.flaticon.com/icons/svg/61/61456.svg"></span>
      </div>
      <div class="commentinfo-block-wrapper">
        <div class="distinct-user-comment" contenteditable="false">Hello</div>
      </div>
      <div class="comment-buttons" style="display: none;">
        <button class="social-update-button"> Update </button>
        <button class="social-cancel-button"> Cancel </button>
      </div>
      <div class="comment-body-divider"></div>
    </li>
  </ul>
</div>

这是Javascript： $（'。edit-img'）。click（function（e）{ e.stopPropagation（）;

  var $li = $(this).closest('.posted-video-comment');
  var editComment = $li.find('.distinct-user-comment');
  var editCommentText = editComment.text();
  $li.find('.delete-comment').css("visibility", "hidden");
  $li.find('.edit-comment').css("visibility", "hidden");

  editComment.html('<textarea class="editPostedComment" placeholder="' + editCommentText + '"style="width: 60%;">' +
    editCommentText +
    '</textarea>');

  $li.find('.editPostedComment').on('focus', function() {
    $(this).text(editCommentText);
  });

  $li.find('.comment-buttons').show();
});

$('.social-cancel-button').click(function(e) {
  e.stopPropagation();
  e.preventDefault();

  var $li = $(this).closest('.posted-video-comment');
  var onEditComment = $li.find('.editPostedComment');

  onEditComment.replaceWith('<div id="distinct-user-comment" contenteditable="false">' + onEditComment.attr('placeholder') + '</div>');
  $li.find('.comment-buttons').hide();
  $li.find('.delete-comment').css("visibility", "visible");
  $li.find('.edit-comment').css("visibility", "visible");
});

这是working fiddle.

具有相同类的多个元素的触发函数

1 个答案: