javascript - 使用 AJAX Jquery Javascript 单击函数

Question

我正在制作一个电影评论网站作为学校项目，我想在电影封面图像上添加一个点击功能，以加载该电影的详细信息和评论。我正在使用的代码可以工作，但似乎不实用。我的 loadReviews 函数中的参数是数据库的电影 ID。

            $(document).ready(function () {
                $("#cover1").click(function () { loadReviews(1); });
                $("#cover2").click(function () { loadReviews(2); });
                $("#cover3").click(function () { loadReviews(3); });
                $("#cover4").click(function () { loadReviews(4); });
                $("#cover5").click(function () { loadReviews(5); });
                $("#cover6").click(function () { loadReviews(6); });
                $("#cover7").click(function () { loadReviews(7); });
                $("#cover8").click(function () { loadReviews(8); });
                $("#cover9").click(function () { loadReviews(9); });
                $("#cover10").click(function () { loadReviews(10); });
                $("#cover11").click(function () { loadReviews(11); });
                $("#cover12").click(function () { loadReviews(12); });
            });

正如你所看到的，我正在手动编写每一个。我尝试使用这样的 for 循环，但没有按照我想象的方式工作。

                for (i = 1; i < 12; i++) {
                    $("#cover" + i).click(function () { loadReviews(i); });
                }

使用循环，它使每个图像加载同一(#12)电影的详细信息。每个图像都分配有类“cover1”、“cover2”等。我想要某种“循环”来自动将每个点击事件绑定(bind)到正确的图像封面。我在 Visual Studio 15 中使用通用处理程序。我们必须使用 ajax 和 jquery 来更新页面而不进行回发，这就是我获取电影和评论的方式。

如果我需要显示更多代码，请告诉我。谢谢!

Answer 1

您可以只使用一次单击处理程序并将标识符存储为数据属性。所以你重复的 HTML 元素可能是这样的:

<div class="cover" data-movieid="1">
    ...
</div>
<div class="cover" data-movieid="2">
    ...
</div>
etc.

然后分配一个单击处理程序，并在该处理程序中从被单击的元素获取标识符。像这样的事情:

$(document).ready(function () {
    $('.cover').click(function () {
        var movieID = $(this).data('movieid');
        loadReviews(movieID);
    });
});

根据 loadReviews() 的作用，您可能可以使整个事情变得更简单。您不必使用选择器中的所有 id 和 only 来提供所有内容，而是可以从任何给定的单击元素中使用 jQuery 来查询 DOM 并找到所需的相对元素，而无需使用一个id。