Я пытаюсь сделать страницу html похожей на библиотеку книг. При этом пользователь может нажать кнопку оценки, чтобы выбранная книга была сохранена в localalstorage, и они получают рейтинг книг при открытии этой страницы.
Но проблема заключается в следующем: когда пользователь нажимает на название книги, чтобы прочитать (т. Е. На весь tr, если мы щелкаем где-нибудь в tr), тогда он получает оценку без специального нажатия на кнопку звездочки.
Как сделать ставку только тогда, когда мы нажимаем на тд, на котором есть кнопка со звездочкой. , Я новичок ie до jquery. Я получил код ниже от stackoverflow. Может ли кто-нибудь опубликовать полный код jquery, чтобы я мог узнать разницу в двух кодах.
Я публикую весь код ниже:
<!DOCTYPE html>
<html>
<head>
<style>
img {
height: 25px;
}
.hide {
display: none;
}
.ratingTable { width: 400px; }
td {
cursor: pointer;
}
td[data-id] { width: 300px; }
</style>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
</head>
<body>
[<a href="comics.html">Comics</a>] [<a href="allbooks.html">All books</a>]<hr/>
<table class="ratingTable">
<tbody id="adventure">
<tr>
<td data-id="Book A">Adventure 1</td>
<td style="display:none" class="serial-code">book-dais</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">Adventure 2</td>
<td style="display:none" class="serial-code">book-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">Adventure 3</td>
<td style="display:none" class="serial-code">book-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>
</tbody>
</table>
<script> const showFavs = function(key,favs) {
if (!favs) return;
key = key.replace("favs","");
favs = JSON.parse(favs);
$.each(favs, function(i, fav) {
const selector = "#"+key+" tr td[data-id='" + fav + "']";
$(selector).closest("tr").trigger("click"); // click the TR
});
};
$(function() {
$('tr').click(function(e) {
const $parentTable = $(this).closest("tbody");
$(this).find('img.white-star').toggle();
$(this).find('img.yellow-star').toggle();
const $favs = $("tr",$parentTable).has('img.yellow-star:visible');
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 your server
})
// read all favs and trigger them
Object.keys(localStorage).forEach(key => {
if (key.endsWith("favs")) showFavs(key,localStorage.getItem(key));
});
});
</script>
</body>
</html>