更改“添加到收藏夹" < tr>中的函数到< tbody> [英] Changing "Add to Favourites" functions from <tr> to <tbody>

查看：49
本文介绍了更改“添加到收藏夹" < tr>中的函数到< tbody>的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我得到了一堆书的代码，其中每本书都带有最喜欢的按钮

I got code for a bunch of books arranged in which has favourite button against each tr

这是我得到的代码

$(function() {
  $('tr').click(function(e) {
    const $parentTable = $(this).closest("table");
    $(this).find('img.white-star').toggle();
    $(this).find('img.yellow-star').toggle();
    const $favs = $("tr").has('img.yellow-star:visible');
    $parentTable.prepend($favs)
    const favs = $favs.find("td:first").map((i, fav) => $(fav).data("id")).get();
    //localStorage.setItem($parentTable.attr("id")+"favs",JSON.stringify(favs)); // uncomment this on server
  })
  let favs // = localStorage.getItem($(".ratingTable").attr("id")+"favs"); // uncomment when on your server
  // favs = favs ? JSON.parse(favs) : []; // uncomment when on your server
  favs = favs ? JSON.parse(favs) : ["Book A", "Book C"]; // remove this after testing
  $.each(favs, function(i, fav) {
    $("table tr td[data-id='" + fav + "']").each(function() {
      $(this).parent().trigger("click")
    });
  });
});

td {
  cursor: pointer;
}

img {
  height: 25px;
}

.hide {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="ratingTable" id="table1">
  <tr>
    <td data-id="Book A">Magic by dalton</td>
    <td>
      <div class="fav">
        <img class="white-star" src="https://i.postimg.cc/g0b9JG0w/unfav.png" />
        <img class="yellow-star hide" src="https://i.postimg.cc/QN1T9bSH/fav.png" />
      </div>
    </td>
  </tr>
  <tr>
    <td data-id="Book B">The chair by Jhon</td>
    <td>
      <div class="fav">
        <img class="white-star" src="https://i.postimg.cc/g0b9JG0w/unfav.png" />
        <img class="yellow-star hide" src="https://i.postimg.cc/QN1T9bSH/fav.png" />
      </div>
    </td>
  </tr>
  <tr>
    <td data-id="Book C"> Book C</td>
    <td>
      <div class="fav">
        <img class="white-star" src="https://i.postimg.cc/g0b9JG0w/unfav.png" />
        <img class="yellow-star hide" src="https://i.postimg.cc/QN1T9bSH/fav.png" />
      </div>
    </td>
  </tr>
</table>

我目前正在尝试制作一个与youtube类似的网站.我想在视频列表中添加上面的评分"选项.下面是我正在使用的代码

I am currently trying to make a site similar to youtube.I would like to have above Rating option to be added to list of videos.Below is code that I am working with

我想要这样:当用户点击分级时，我不仅希望保存视频名称的tr，而且还希望所有tr&应该选择该tbody下的td并将其保存到本地存储&刷新页面时保留，但在书单中仅选择和保存tr.我希望你能明白.

I would like to have this: when user click rating I want not only the tr of video name to be saved but all tr & td under that tbody should be selected and saved to localstorage & retained when refreshing the page but in book listing only tr is selected and saved . I hope you get it.

可以将评级"或添加到收藏夹"按钮从tr迁移到tbody.感谢您的帮助.谢谢

Can Rating or Add to favourite button migrated from tr to tbody .Any help is appreciated. Thanks

.white-star,
.yellow-star {
  height: 25px;
}

.hide {
  display: none;
}

.ratingTable {
  width: 400px;
}

td {
  cursor: pointer;
}

td[data-id] {
  width: 300px;
}

#table1 {
  width: 100%;
}

<table id="Music">
  <tbody data-id="Video-A" class="searchable music">
    <tr class="row">
      <td rowspan="4" class="a"><img src="https://img.youtube.com/vi/{{youtube video code }}/default.jpg" alt="" /></td>
      <td class="a2"><a href="{{LINK to Yotube video}}">Music </a></td>
      <td rowspan="4">
        <div class="fav">
          <img class="white-star" src="https://i.postimg.cc/g0b9JG0w/unfav.png" />
          <img class="yellow-star hide" src="https://i.postimg.cc/QN1T9bSH/fav.png" />
        </div>
      </td>
    </tr>
    <tr class="row">
      <td class="b"><span class="child">  Date : 15-Apr-20 </span></td>
    </tr>
    <tr class="row">
      <td class="b"><span class="child">Length : </span></td>
    </tr>
    <tr class="row">
      <td class="b"><span class="child">Category : Music  </span></td>
    </tr>
    <tr class="row">
      <td rowspan="4" class="a"><img src="https://img.youtube.com/vi/{{youtube video code }}/default.jpg" alt="" /></td>
      <td class="a2"><a href="{{LINK to Yotube video}}">Music </a></td>
      <td rowspan="4">
        <div class="fav">
          <img class="white-star" src="https://i.postimg.cc/g0b9JG0w/unfav.png" />
          <img class="yellow-star hide" src="https://i.postimg.cc/QN1T9bSH/fav.png" />
        </div>
      </td>
    </tr>
    <tr class="row">
      <td class="b"><span class="child">  Date : 15-Apr-20 </span></td>
    </tr>
    <tr class="row">
      <td class="b"><span class="child">Length : </span></td>
    </tr>
    <tr class="row">
      <td class="b"><span class="child">Category : Music  </span></td>
    </tr>
  </tbody>
</table>

<table id="Art">

  <tbody data-id="Video-B" class="searchable art">
    <tr class="row">
      <td rowspan="4" class="a"><img src="https://img.youtube.com/vi/{{youtube video code }}/default.jpg" alt="" /></td>
      <td class="a2"><a href="{{LINK to Yotube video}}">art 1</a></td>
      <td rowspan="4">
        <div class="fav">
          <img class="white-star" src="https://i.postimg.cc/g0b9JG0w/unfav.png" />
          <img class="yellow-star hide" src="https://i.postimg.cc/QN1T9bSH/fav.png" />
        </div>
      </td>
    </tr>
    <tr class="row">
      <td class="b"><span class="child">  Date : 15-Apr-20 </span></td>
    </tr>
    <tr class="row">
      <td class="b"><span class="child">Length : </span></td>
    </tr>
    <tr class="row">
      <td class="b"><span class="child">Category : art </span></td>
    </tr>
  </tbody>
</table>

<table id="Art">
  <tbody data-id="Video-D" class="searchable dance">
    <tr class="row">
      <td rowspan="4" class="a"><img src="https://img.youtube.com/vi/{{youtube video code }}/default.jpg" alt="" /></td>
      <td class="a2"><a href="{{LINK to Yotube video}}">dance 1</a></td>
      <td rowspan="4">
        <div class="fav">
          <img class="white-star" src="https://i.postimg.cc/g0b9JG0w/unfav.png" />
          <img class="yellow-star hide" src="https://i.postimg.cc/QN1T9bSH/fav.png" />
        </div>
      </td>
    </tr>
    <tr class="row">
      <td class="b"><span class="child">  Date : 15-Apr-20 </span></td>
    </tr>
    <tr class="row">
      <td class="b"><span class="child">Length : </span></td>
    </tr>
    <tr class="row">
      <td class="b"><span class="child">Category : dance  </span></td>
    </tr>
  </tbody>
</table>

推荐答案

您需要将td更改为随处可见的body

You need to change td to tbody everywhere

并更改为此

 $("table tbody[data-id='" + fav + "']").each(function() {

注意:每个小腿中不能只有一件以上的东西才能起作用，并且所有小体都必须在同一张桌子上

NOTE: You cannot have more than one thing in each tbody for this to work and ALL tbodies have to be in the same table

  • $(".fav").on("click",clickIt)更改为const $tbody = $(e.target).closest("tbody");
  • 删除地图中的find("tbody")
  • 还原所需的<table class="ratingTable" id="videorating">
  • $(".fav").on("click",clickIt) change to const $tbody = $(e.target).closest("tbody");
  • remove find("tbody") in the map
  • Restore needed <table class="ratingTable" id="videorating">

完整代码

https://plungjan.name/SO/bookrating/vidrate.html 

const clickIt = (e) => {
  const $tbody = $(e.target).closest("tbody");
  console.log($tbody.data("id"))
  const $parentTable = $tbody.closest("table");
  $tbody.find('img.white-star').toggle();
  $tbody.find('img.yellow-star').toggle();
  const $favs = $("tbody").has('img.yellow-star:visible');
  $parentTable.prepend($favs)
  const favs = $favs.map((i, fav) => $(fav).data("id")).get();
  //localStorage.setItem($parentTable.attr("id")+"favs",JSON.stringify(favs)); // uncomment this on server
};

$(function() {
  $('.fav').click(clickIt)
  let favs // = localStorage.getItem($(".ratingTable").attr("id")+"favs"); // uncomment when on your server
  // favs = favs ? JSON.parse(favs) : []; // uncomment when on your server
  favs = favs ? JSON.parse(favs) : ["Video-A", "Video-D"]; // remove this after testing
  $.each(favs, function(i, fav) {
    $("table tbody[data-id='" + fav + "']").each(function() {
      $(this).click()
    });
  });
});

td {
  cursor: pointer;
}

img {
  height: 25px;
}

.hide {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="ratingTable" id="videorating">
  <tbody data-id="Video-A" class="searchable music">
    <tr class="row">
      <td rowspan="4" class="a">Video-A: <img src="https://img.youtube.com/vi/{{youtube video code }}/default.jpg" alt="" /></td>
      <td class="a2"><a href="{{LINK to Yotube video}}">Music </a></td>
      <td rowspan="4">
        <div class="fav">
          <img class="white-star" src="https://i.postimg.cc/g0b9JG0w/unfav.png" />
          <img class="yellow-star hide" src="https://i.postimg.cc/QN1T9bSH/fav.png" />
        </div>
      </td>
    </tr>
    <tr class="row">
      <td class="b"><span class="child">  Date : 15-Apr-20 </span></td>
    </tr>
    <tr class="row">
      <td class="b"><span class="child">Length : </span></td>
    </tr>
    <tr class="row">
      <td class="b"><span class="child">Category : Music  </span></td>
    </tr>
  </tbody>
  <tbody data-id="Video-B" class="searchable music">
    <tr class="row">
      <td rowspan="4" class="a">Video-B: <img src="https://img.youtube.com/vi/{{youtube video code }}/default.jpg" alt="" /></td>
      <td class="a2"><a href="{{LINK to Yotube video}}">Music </a></td>
      <td rowspan="4">
        <div class="fav">
          <img class="white-star" src="https://i.postimg.cc/g0b9JG0w/unfav.png" />
          <img class="yellow-star hide" src="https://i.postimg.cc/QN1T9bSH/fav.png" />
        </div>
      </td>
    </tr>
    <tr class="row">
      <td class="b"><span class="child">  Date : 15-Apr-20 </span></td>
    </tr>
    <tr class="row">
      <td class="b"><span class="child">Length : </span></td>
    </tr>
    <tr class="row">
      <td class="b"><span class="child">Category : Music  </span></td>
    </tr>
  </tbody>
  <tbody data-id="Video-C" class="searchable art">
    <tr class="row">
      <td rowspan="4" class="a">Video-C: <img src="https://img.youtube.com/vi/{{youtube video code }}/default.jpg" alt="" /></td>
      <td class="a2"><a href="{{LINK to Yotube video}}">art 1</a></td>
      <td rowspan="4">
        <div class="fav">
          <img class="white-star" src="https://i.postimg.cc/g0b9JG0w/unfav.png" />
          <img class="yellow-star hide" src="https://i.postimg.cc/QN1T9bSH/fav.png" />
        </div>
      </td>
    </tr>
    <tr class="row">
      <td class="b"><span class="child">  Date : 15-Apr-20 </span></td>
    </tr>
    <tr class="row">
      <td class="b"><span class="child">Length : </span></td>
    </tr>
    <tr class="row">
      <td class="b"><span class="child">Category : art </span></td>
    </tr>
  </tbody>
  <tbody data-id="Video-D" class="searchable dance">
    <tr class="row">
      <td rowspan="4" class="a">Video-D: <img src="https://img.youtube.com/vi/{{youtube video code }}/default.jpg" alt="" /></td>
      <td class="a2"><a href="{{LINK to Yotube video}}">dance 1</a></td>
      <td rowspan="4">
        <div class="fav">
          <img class="white-star" src="https://i.postimg.cc/g0b9JG0w/unfav.png" />
          <img class="yellow-star hide" src="https://i.postimg.cc/QN1T9bSH/fav.png" />
        </div>
      </td>
    </tr>
    <tr class="row">
      <td class="b"><span class="child">  Date : 15-Apr-20 </span></td>
    </tr>
    <tr class="row">
      <td class="b"><span class="child">Length : </span></td>
    </tr>
    <tr class="row">
      <td class="b"><span class="child">Category : dance  </span></td>
    </tr>
  </tbody>
</table>

这篇关于更改“添加到收藏夹" &lt; tr&gt;中的函数到&lt; tbody&gt;的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆