我正在嘗試制作像圖書庫(kù)一樣的 html 頁(yè)面。在此用戶可以單擊“評(píng)分”按鈕，以便將所選書籍保存到本地存儲(chǔ)，并且每當(dāng)打開該頁(yè)面時(shí)他們都會(huì)獲得書籍評(píng)級(jí)。但問(wèn)題是這樣的：當(dāng)用戶單擊書名來(lái)閱讀時(shí)（即整個(gè) tr，如果我們單擊 tr 中的任意位置），則無(wú)需專門單擊星形按鈕即可對(duì)其進(jìn)行評(píng)級(jí)。如何使其僅當(dāng)我們點(diǎn)擊帶有星號(hào)按鈕的 td 時(shí)才進(jìn)行評(píng)分。。我是 jquery 的新手。我從 stackoverflow 得到了以下代碼。任何人都可以發(fā)布完整的 jquery 代碼，以便我可以了解兩個(gè)代碼的區(qū)別。我將完整代碼發(fā)布在下面：<!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 回答
慕尼黑的夜晚無(wú)繁華
TA貢獻(xiàn)1864條經(jīng)驗(yàn) 獲得超6個(gè)贊
當(dāng)我讀了幾遍這個(gè)問(wèn)題后，我想知道下面的話
但問(wèn)題是這樣的：當(dāng)用戶單擊書名來(lái)閱讀時(shí)（即整個(gè) tr，如果我們單擊 tr 中的任意位置），則無(wú)需專門單擊星形按鈕即可對(duì)其進(jìn)行評(píng)級(jí)。
如何使其僅當(dāng)我們點(diǎn)擊帶有星號(hào)按鈕的 td 時(shí)才進(jìn)行評(píng)分。
嘗試以下方式。
稍微修改你的 html，通過(guò)向帶有評(píng)級(jí)圖標(biāo)的表列添加一個(gè)虛擬 css：
<td class="myratingSystem">...</td>
因?yàn)闆]有定義 css declarations，所以瀏覽器不會(huì)對(duì)這些標(biāo)簽執(zhí)行任何操作。我經(jīng)常使用它來(lái)關(guān)注特定元素。
修改你的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");
- 1 回答
- 0 關(guān)注
- 144 瀏覽
添加回答
舉報(bào)
0/150
提交
取消