将 "添加到收藏夹 "功能从<tr>改为<tbody&gt。

问题描述 投票:1回答:1

我得到了一堆书的代码,这些书在每个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的网站,我想让上面的评级选项被添加到视频列表中。

我想有这样的功能:当用户点击评分时,我希望不仅保存视频名称的tr,而且该tbody下的所有tr & td应该被选中并保存到本地存储& 在刷新页面时保留,但在图书列表中只有tr被选中并保存。希望你能明白。

评级或添加到收藏夹按钮可以从tr迁移到tbody.任何帮助是感激。谢谢你的帮助。

.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>
javascript html jquery
1个回答
0
投票

你需要把各处的td改为tbody。

并改成这样

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

注意:每个tbody中不能有一个以上的东西,所有的tbody必须在同一个表中。

  • $(".fav").on("click",clickIt) 改为 const $tbody = $(e.target).closest("tbody");
  • 去掉 find("tbody") 在地图上
  • 恢复所需 <table class="ratingTable" id="videorating">

完整的代码

https:/plungjan.nameSObookratingvidrate.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>
© www.soinside.com 2019 - 2024. All rights reserved.