慕村225694
2022-06-16 10:01:12
我正在嘗試使 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
提交
取消