Question

我正在尝试使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>
                <td data-id="Book C">Adventure 3</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>
        </tbody>
    </table>
<script>    const showFavs = function(key,favs) {
      if (!favs) return;
      key = key.replace("favs",""); 
      favs = JSON.parse(favs);
      $.each(favs, function(i, fav) {
        const selector = "#"+key+" tr td[data-id='" + fav + "']";
        $(selector).closest("tr").trigger("click"); // click the TR
      });
    };

    $(function() {
      $('tr').click(function(e) {
        const $parentTable = $(this).closest("tbody");
        $(this).find('img.white-star').toggle();
        $(this).find('img.yellow-star').toggle();
        const $favs = $("tr",$parentTable).has('img.yellow-star:visible');
        const favs = $favs.find("td:first").map((i, fav) => $(fav).data("id")).get();
 //       localStorage.setItem($parentTable.attr("id") + "favs", JSON.stringify(favs));   // Uncomment this on your server
      })

      // read all favs and trigger them

      Object.keys(localStorage).forEach(key => {
         if (key.endsWith("favs")) showFavs(key,localStorage.getItem(key));
      });
    });
</script>
</body>
</html>

Answer 1

几次阅读问题后，我想知道以下单词

但是问题是这样的：当用户单击书名进行阅读时（即整个tr，如果我们单击tr中的任意位置），那么它的评级就很高无需专门点击星形按钮。

只有在我们点击带有星标按钮的td时，如何对其进行评分。

尝试以下方法。

通过在表列中添加带有评分图标的虚拟css来稍微修改html：

由于未定义css定义，因此浏览器对这些标签不执行任何操作。我经常使用它来关注特定元素。

修改您的jquery脚本：

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

还必须更改以下几行：

$（selector）.closest（“ tr”）。trigger（“ click”）;

到

$（selector）.parent（）。find（“ td.myratingSystem”）。trigger（“ click”）;

希望有帮助。

将点击功能从<tr>更改为<td>

1 个答案: