javascript - 为什么这个 event.target.previousElementSibling 不起作用？

Question

所以我得到了这段代码

                    <div class="col-lg-12 video-meta">
                    <div class="container">
                        <span class="views"><i class="far fa-eye"></i>{{ Counter::show('post', $post->id) }}</span>

                        <span class="lnd">
                            <a class="like" href="#"><i class="far fa-thumbs-up"></i></a>
                            <a class="like" href="#"><i class="far fa-thumbs-down"></i></a>
                        </span>

我用它来定位

        $('.like').on('click', function(event) {
        event.preventDefault();
        var isLike = event.target.previousElementSibling == null;
        console.log(isLike);

在这两种情况下它都返回“true”，为什么？!是否有一个原因？我已经连续使用了 4 个小时，它曾经工作过一次，我没有做任何更改只是休息了一下，然后在我休息后它就没有工作了？我认为这是一个糟糕的笑话。我在这里错过了什么？

它基本上应该采用“like”类，并且由于第一个标签没有 previousSiblingElement 为 null，它应该返回 true，但是第二个标签有一个元素与同级标签相同并且仍然返回 true..

Answer 1

event.target是 <i>元素，因为这是真正发生点击的元素。

如果你想要 <a> (您确实在其上附加了事件处理程序)，您需要请求 event.currentTarget甚至只是 this :

$('.like').on('click', function(event) {
  event.preventDefault();
  console.log(event.target); // <i>
  
  var isLike = event.currentTarget.previousElementSibling == null;
  console.log(isLike);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-lg-12 video-meta">
  <div class="container">
    <span class="lnd">
      <a class="like" href="#"><i class="far fa-thumbs-up">a</i></a>
      <a class="like" href="#"><i class="far fa-thumbs-down">b</i></a>
    </span>
  </div>
</div>