在相同的重复帖子中像计数跨度一样更新

发布时间：2021-02-25 07:31

我在同一页面上有重复的帖子列表。因此，某些帖子在同一页面上出现不止一次。

点赞系统通过javascript更新一个span内一个帖子的点赞数，id为“like-{{ $item->id }}”，以post id标识。

<span id="like-{{ $item->id }}">
    @json($item->likers()->count())
</span>

当一个帖子被点赞时，只会更新一张明信片，其他明信片不会，尽管具有相同的 ID。

我该如何解决这个烦恼？

function likePost(a) {
  $.ajaxSetup({
    headers: {
      "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content")
    }
  });
  $(this);
  $.ajax({
    url: APP_URL + "/save_like",
    type: "POST",
    dataType: "json",
    data: {
      item: a,
      _token: $('meta[name="csrf-token"]').attr("content")
    },
    success: function(e) {
      var t;
      1 == e.bool ? ($("#like-icon-" + a).removeClass("text-muted").addClass("icon-filled text-danger"), t = $("#like-" + a).text(), $("#like-" + a).text(++t)) : 0 == e.bool && ($("#like-icon-" + a).removeClass("icon-filled text-danger").addClass("text-muted"), t = $("#like-" + a).text(), $("#like-" + a).text(--t))
    },
    error: function(e) {
      location.replace(APP_URL + "/login")
    }
  })
};

<a href="javascript:void(0);" onclick="likePost({{ $item->id }})" class="btn btn-light border-0"><svg xmlns="http://www.w3.org/2000/svg" id="like-icon-{{ $item->id }}" class="icon @if(Auth::check()) @if(Auth::user()->hasLiked($item)) icon-filled text-danger @else text-muted @endif @else text-muted @endif" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M19.5 13.572l-7.5 7.428l-7.5 -7.428m0 0a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572" /></svg> <span id="like-{{ $item->id }}">@json($item->likers()->count())</span></a>

已应用更改：

<a href="#" class="btn btn-light border-0">
     <svg xmlns="http://www.w3.org/2000/svg" id="like-icon-{{ $item->id }}" class="icon  icon-filled text-danger" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M19.5 13.572l-7.5 7.428l-7.5 -7.428m0 0a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572" /></svg> 
     <span id="like-{{ $item->id }}">
          @json($item->likers()->count())
     </span>
</a>

以及您提供的 java 代码。它没有显示任何错误，但它不起作用。

为了不完全说明我的意图，我留下一些关于我的问题的图片。

我有一个选项卡，可以获取其中的所有类别和帖子，因此有些帖子是重复的，但是通过点击，第一个帖子会更新（点赞数），而在其他卡片中则不会。

回答1

需要更多信息。你是如何通过 JavaScript 更新的？

如果你使用 getElementById 左右，这里的问题是它只返回满足查询的第一个元素，而不是页面上具有相同 id 的所有元素。使用一个类，这样你就可以使用 querySelectorAll 并循环遍历它并进行必要的更新。

HTML：

<span id="like-{{ $item->id }}" class="post-{{ $item->id }}">
    @json($item->likers()->count())
</span>

JS：

const setLikes = postID => {
  const postElems = document.querySelectorAll(`.post-${postID}`);
  // loop through all the posts
  for(let i = 0; i < postElems.length; i++){
    // use the logic here to update the like counts as you want
  }


}

回答2

试试这个

将<span id="like-{{ $item->id }}">改为
<span class="likes" data-id="{{ $item->id }}">
将链接代码更改为此 - 将 ID 添加到链接，而不是添加到 SVG 或 span

<a href="#"  id="like-{{ $item->id }}" class="like-link btn btn-light border-0">
  <svg ... /></svg> <span>1 like</span>
</a>

$.ajaxSetup({
  headers: {
    "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content")
  }
});

$("a[id^=like]").on("click", function() {
  const $link = $(this);
  const a = $link.attr("id").split("-")[1]; // make id="like-1234" into 1234
  console.log(a)
  
  /* Commented to test this snippet. uncomment in working code
  
  $.ajax({
    url: APP_URL + "/save_like",
    type: "POST",
    dataType: "json",
    data: {
      item: a,
      _token: $('meta[name="csrf-token"]').attr("content")
    },
    success: function(e) {
      const liked = e.bool == 1;
      */
      const liked = 1; // test, remove when using ajax
      $(".likes[data-id="+a+"]").each(function() {
        $(this)
          .toggleClass("text-muted", !liked)
          .toggleClass("icon-filled text-danger", liked)
        let t = +$(this).text();
        t += liked ? 1 : -1
        if (t<0) t=0; // remove if you support negative likes
        $link.find("span").text(t);
        $(this).html($link.html());

      })
    /* },
    error: function(e) {
      location.replace(APP_URL + "/login")
    }
  }) */
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span class="likes" data-id="1234">
        1
    </span><br/>
<span class="likes" data-id="1234">
        1
    </span>
<hr>


<a href="#" id="like-1234" class="like-link btn btn-light border-0"><svg xmlns="http://www.w3.org/2000/svg" class="icon  icon-filled text-danger" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M19.5 13.572l-7.5 7.428l-7.5 -7.428m0 0a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572" /></svg> <span>1</span></a>

javascript 相关推荐

laravel 相关推荐