我正在尝试使 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>
1 回答
慕容3067478
TA贡献1773条经验 获得超3个赞
在我读了几遍这个问题之后，我想知道下面的话
但问题是：当用户单击要阅读的书名时（即整个 tr，如果我们单击 tr 中的任何位置），则无需专门单击星号按钮即可获得评级。
如何仅在我们单击带有星号按钮的 td 时才对其进行评分。
尝试以下方式。
通过在带有评级图标的表格列中添加一个虚拟 css 来稍微修改您的 html：
<td class="myratingSystem">
...
</td>
因为没有定义 css 声明，浏览器对这些标签不做任何事情。我经常使用它来关注特定元素。
修改您的 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.myratingSystem").trigger("click");
希望能帮助到你。
添加回答
举报
0/150
提交
取消