向现有的动态函数中添加一个Like +排序函数

Question

我编写了一个基于json数据库的动态创建网页的函数。

现在我想添加两个函数：

如果您单击类似的img (其获得id按钮)，则类似的计数器在网页上应该会增加1。非常简单，只需用.text(variable)

• A variable++单击jQuery variable++，然后单击jQuery排序函数--根据收到的“喜欢”项，您应该能够对其进行排序(最喜欢的是div第一、第二、第三……

)。

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

像这样的人暂时没有被保存在任何地方。

因为我坐了3h，谷歌( google )那么多，那么多堆积如山，我想我脑子里装满了不同的东西，现在似乎什么都没有了。

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>

​