使用AJAX Jquery Javascript单击功能 [英] Click Function using AJAX Jquery Javascript

问题描述

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

I am making a movie review web site as a project for school, and I want to put a click function on the image movie cover which will load the details and reviews of that movie. The code I'm using works but does not seem practical. The parameter in my loadReviews function is the movie ID for the database.

            $(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循环，但无法按照我的想法工作.

As you can see I am writing each one manually. I tried using a for loop like this but does not work the way I thought.

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

使用循环，可使每个图像加载同一(#12)电影的详细信息.每个图像都被分配了"cover1"，"cover2"等类.我希望某种循环"将每个click事件自动绑定到正确的图像封面.我在Visual Studio 15中使用通用处理程序.我们必须使用ajax和jquery来更新页面而没有回发，这就是我获得电影和评论的方式.

Using the loop it makes each image load the details of the same (#12) movie. Each image is assigned the class 'cover1', 'cover2' etc. I want some sort of 'loop' to automatically bind each click event to the correct image cover. I'm using a generic handler in Visual Studio 15. We must use ajax and jquery to update the page without a postback, this is how I am getting the movies and reviews.

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

If I need to show more code let me know. Thanks!

推荐答案

您只需拥有一个单击处理程序，并将标识符存储为数据属性，就可以摆脱困境.因此，您重复的HTML元素可能是这样的:

You could get away with having just one click handler and store the identifier as a data attribute. So your repeated HTML element might be something like this:

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

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

Then assign a single click handler and within that handler get the identifier from the element which was clicked. Something like this:

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

根据loadReviews()的作用，可以可能使整个过程更简单.无需使用选择器中的所有内容提供所有id s和 ，而是可以使用jQuery查询DOM并从中找到所需的相对元素，而无需使用id.

Depending on what loadReviews() does, you can probably make the whole thing simpler. Instead of giving everything ids and only using those in your selectors, from any given clicked element you can use jQuery to query the DOM and find the relative element you need without using an id.

这篇关于使用AJAX Jquery Javascript单击功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！