亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

向現有動態功能添加“贊 + 排序”函數

向現有動態功能添加“贊 + 排序”函數

森欄 2022-09-29 16:40:49
我編寫了一個函數,該函數基于 json 數據庫為我動態創建網頁?,F在我想添加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);    });  }
查看完整描述

1 回答

?
繁花如伊

TA貢獻2012條經驗 獲得超12個贊

我已經為項目添加了一個容器元素,因為我假設你有一個,因為最好有一個,而不僅僅是將排序的項目添加到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>


查看完整回答
反對 回復 2022-09-29
  • 1 回答
  • 0 關注
  • 88 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號