时间戳

首页 > 解决方案 > 向现有动态函数添加 Like + Sort 函数

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

问题描述

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

现在我想添加2个功能：

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

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

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

喜欢的东西暂时没有保存在任何地方。

自从坐在上面 3 小时和 google 这么多 stackoverflow 我想我用不同的东西使我的大脑超负荷了，现在似乎没有任何工作^^

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);
    });
  }

标签： javascripthtmljquery

解决方案

我已经为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>

推荐阅读