我得到了一堆书的代码,这些书在每个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>
你需要把各处的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>