亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

將點擊功能從 <tr> 更改為 <td>

將點擊功能從 <tr> 更改為 <td>

回首憶惘然 2023-11-13 11:04:01
我正在嘗試制作像圖書庫一樣的 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 回答

?
慕尼黑的夜晚無繁華

TA貢獻1864條經驗 獲得超6個贊

當我讀了幾遍這個問題后,我想知道下面的話

但問題是這樣的:當用戶單擊書名來閱讀時(即整個 tr,如果我們單擊 tr 中的任意位置),則無需專門單擊星形按鈕即可對其進行評級。

如何使其僅當我們點擊帶有星號按鈕的 td 時才進行評分。

嘗試以下方式。

  1. 稍微修改你的 html,通過向帶有評級圖標的表列添加一個虛擬 css:

<td class="myratingSystem">...</td>

因為沒有定義 css declarations,所以瀏覽器不會對這些標簽執行任何操作。我經常使用它來關注特定元素。

  1. 修改你的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");


查看完整回答
反對 回復 2023-11-13
  • 1 回答
  • 0 關注
  • 153 瀏覽

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號