将点击功能从 <tr> 更改为 <td>
我正在尝试制作像图书库一样的 html 页面。在此用户可以单击“评分”按钮，以便将所选书籍保存到本地存储，并且每当打开该页面时他们都会获得书籍评级。
但问题是这样的：当用户单击书名来阅读时（即整个 tr，如果我们单击 tr 中的任意位置），则无需专门单击星形按钮即可对其进行评级。
如何使其仅当我们点击带有星号按钮的 td 时才进行评分。。我是 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>
回首忆惘然1回答
-
慕尼黑的夜晚无繁华
当我读了几遍这个问题后，我想知道下面的话但问题是这样的：当用户单击书名来阅读时（即整个 tr，如果我们单击 tr 中的任意位置），则无需专门单击星形按钮即可对其进行评级。如何使其仅当我们点击带有星号按钮的 td 时才进行评分。尝试以下方式。稍微修改你的 html，通过向带有评级图标的表列添加一个虚拟 css：<td class="myratingSystem">...</td>因为没有定义 css declarations，所以浏览器不会对这些标签执行任何操作。我经常使用它来关注特定元素。修改你的jquery脚本：$(function() { $('td.myratingSystem').click(function(e) { //As is written into question the rest of the code snippet here is working //as expected. ... }); }您还必须更改以下几行：$(selector).closest("tr").trigger("click");到$(selector).parent().find("td.my ratingSystem").trigger("click");
随时随地看视频慕课网APP
相关分类
Html5