javascript - 将“添加到收藏夹”功能从更改为
问题描述
我得到了一堆书籍的代码,其中每个 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.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>
推荐阅读
- javascript - Material-ui IconButton 边缘属性不起作用
- c - 程序在 c 中的 fgets() 处崩溃
- jquery - 调整窗口大小后重新计算 CSS @keyframes(100vw 和 100vh)
- c# - 加载 XML 文件时出现 System.UnauthorizedAccessException 错误
- flutter - 为什么我的 if-Condition 后面的 return 带有红色下划线?我在正文中引用了堆栈小部件中的 if
- reactjs - 函数没有进入 React / Redux 的调度中
- wordpress - 为什么 WP 编辑器中的按钮组件一直在前端渲染锚标签?
- javascript - Select2 HTML 所需的错误放置问题
- html - Position Sticky 不适用于表格边界属性
- apache-flink - Flink:TypeExtractor 抱怨 protobuf 类,即使为它注册了 ProtobufSerializer