向现有动态功能添加“赞 + 排序”函数

Question

我编写了一个函数，该函数基于 json 数据库为我动态创建网页。现在我想添加2个函数：如果您单击喜欢img（它获得了id按钮），则网页上的喜欢计数器应增加1。非常简单，只需使用jQuery变量++进行一次（单击），然后.text(variable)排序函数 - 基于喜欢的一个项目收到，你应该能够排序它（最喜欢的div第一，第二，第三....当我给所有喜欢的按钮并输出一个单独的ID时，我可以为每个单独的变量单独编写它，但我想让它成为动态的，所以如果你将新数据添加到json文件，它可以动态地与喜欢和排序函数一起工作。喜欢的人现在没有保存在任何地方。自从坐在上面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

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

$(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>