Question

我需要使用js访问文本区域并在bootstrap模式中填充输入字段。我可以通过写这一行来访问标题：

event.target.parentNode.parentNode.childNodes[1].textContent;

但是当涉及到帖子时，我无法访问这一行：

event.target.parentNode.parentNode.childNodes[2].textContent;

这是我正在使用的html：

<article class="post col-md-6 ">
        <div class="media postforeach postborderleft">
            <div class="media-left media-top">

            </div>
            <div class="media-body">
                <header><h5 class="media-heading">{{ $post->title }}<i class="fa fa-angle-down pull-right " aria-hidden="true"></i></h5> </header>
                <p><i>{{ $post->body }}</i></p>
                <div class="info">
                    Posted by {{ $post->user->name }} on {{ $post->created_at }}
                </div>
              @if (Auth::check())
                <div class="interaction">
                      <a href="#" class="like">Like</a> |
                      <a href="#" class="like">Dislike</a>
                @if (Auth::user() == $post->user)
                        |
                      <a href="#" class="edit">Edit</a> |
                      <a href="{{ route('post.delete', ['post_id' => $post->id]) }}" class="like">Delete</a>
                 @endif
                </div>
              @else
                <a href="{{ route('registeration') }}" class="like" style="color: red">Login to interract with posts!</a>
              @endif
            </div>
        </div>
        <br>
    </article>

这是整个js代码：

$('.post').find('.edit').on('click',function(event) {
event.preventDefault();

var postTitle = event.target.parentNode.parentNode.childNodes[1].textContent;
var postBody = event.target.parentNode.parentNode.childNodes[2].textContent;
$('#post-title').val(postTitle);
$('#post-body').val(postBody);

$('#edit-model').modal();
});

非常感谢任何帮助。

Answer 1

这是由于.media-body的子节点之间的空白，在解析时成为DOM中的Text个节点。

你应该使用

var postBody = event.target.parentNode.parentNode.children[1].textContent;

或

var postBody = event.target.parentNode.parentNode.childNodes[3].textContent;

或者更好的是，重写您的标记以拥有一个可正确选择的{{ $post->body }}容器（例如，向<p>添加一个类），并使用来自共同祖先的选择（可能是.media-body而不是硬编码的节点遍历。

编辑： 此外，由于您已经在使用jQuery，为什么不使用jQuery正确的DOM遍历语法：

var $mediaBody = $(this).parents('.media-body'),
    postTitle = $mediaBody.find('.media-heading').text(),
    postBody = $mediaBody.find('p:first').text();

Answer 2

考虑用类标记标题和正文，例如

<header class="post-title">...</header>
<p class="post-body>...</p>

然后从“编辑”按钮向后移动到帖子，然后向下移动到标题和正文。优点是，即使您更改了标记，这也不会中断。

$('.post .edit').on('click', function(event) {
  var post = $(event.target).closest('.post');
  var postTitle = post.find('.post-title').text();
  var postBody = post.find('.post-body').text();
  // ...
});

如何使用JavaScript定位<article>中的特定元素？

2 个答案: