向现有动态函数添加 Like + Sort 函数

Question

我写了一个函数，它基于一个 json 数据库为我动态创建一个网页。

现在我想添加 2 个函数：

1. 如果您点击点赞 img（它有 id 按钮），则网页上的点赞计数器应该会增加 1。非常简单，只需使用 jQuery 变量 ++ 点按（点击）然后 .text(variable)

2. 一个排序功能 - 根据收到的喜欢一个项目，您应该能够对其进行排序（最喜欢的 div 第一，第二，第三......

当我给所有类似的按钮并输出一个单独的 id 时，我可以为每个单独的变量单独编写它，但我想让它动态化，所以如果你将新数据添加到 json 文件，它会动态地与 like 和 sort 函数一起工作.

点赞暂时没有保存在任何地方。

自从坐在上面 3 小时和谷歌这么多堆栈溢出后，我想我用不同的东西使我的大脑超负荷，现在似乎没有任何工作^^

function filmInsert(insert) {
    $.each(film, function(i, data) { //.each statt loop
      let box = 

      `<div class="boxwrapper">
      <div class="imgbox">
      <img src="${data.img}" alt="${data.titel}">
    </div>
    <div class="textbox">
        <h3>${data.titel}</h3>
        <p>${data.beschreibung}</p>
        <p> <a id="button${data.id}">
          <img src="img/budspencer_official.png"> Like
          </a>
          <span class="output${data.id}">${data.likes}</span>
        </p>
      </div>
    </div>`;
      insert.append(box);
    });
  }

Answer 1

我已经为 boxwrapper 项目添加了一个容器元素，因为我假设你有一个，而且最好有一个，而不是仅仅将已排序的项目添加到 HTML 文档的正文中。

$(document).on("click", ".textbox a", function() {
  let likes = parseInt($(this).closest(".textbox").find("span").text());
  $(this).closest(".textbox").find("span").text(likes + 1);
});
$("#sort").on("click", function() {
  let divs = $(".boxwrapper")
  let sorted = divs.sort(function(a, b) {
     return $(a).find("span").text() < $(b).find("span").text() ? 1 : -1;
  });
  $(".container").html(sorted);

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="boxwrapper">
    <div class="imgbox">
      <img src="example.gif" alt="Title">
    </div>
    <div class="textbox">
      <h3>Titel</h3>
      <p>Description</p>
      <p> <a id="button1">
          <img src="https://dummyimage.com/40x40/000/fff&text=1"> Like
        </a>
        <span class="output1">0</span>
      </p>
    </div>
  </div>
  <div class="boxwrapper">
    <div class="imgbox">
      <img src="example.gif" alt="Title">
    </div>
    <div class="textbox">
      <h3>Titel 2</h3>
      <p>Description 2</p>
      <p> <a id="button2">
          <img src="https://dummyimage.com/40x40/000/fff&text=2"> Like
        </a>
        <span class="output2">0</span>
      </p>
    </div>
  </div>
</div>

<button id="sort">
  Sort
</button>