使用AJAX Jquery Javascript单击Function

我正在制作一个电影评论网站作为学校的项目，我想在图像电影封面上放置一个点击function，它将加载该电影的详细信息和评论。 我正在使用的代码有效但似乎不实用。 我的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’等。我想要某种’循环’来自动将每个点击事件绑定到正确的图像封面。 我在Visual Studio 15中使用通用处理程序。我们必须使用ajax和jquery来更新页面而不进行回发，这就是我获取电影和评论的方式。

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

Answer 1

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

 
 ... 
 
 ... 
 etc. 

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

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

根据loadReviews()作用，您可以使整个过程变得更简单。 您可以使用jQuery查询DOM并在不使用id情况下查找所需的相对元素，而不是使用您的选择器中的所有id并仅使用它们。

Answer 2

如果HTML无法更改

 $("[id^=cover]").click(function () { var rev = parseInt(this.id.replace(/\D+/g, '')); loadReviews(rev); }); 

Answer 3

我建议使用“封面”类和带有id的数据参数，而不是为每个封面使用ID。

并且js代码看起来像：

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

Answer 4

使用循环，它使每个图像加载相同（＃12）电影的细节。

发生这种情况是因为当循环结束时，变量的值始终是事件将来发生的最后一个。

两种解决方法（ 立即调用函数表达式 ）：

 function loadReviews(i) { console.log(i); } for (i = 1; i < 5; i++) { (function(i) { $("#cover" + i).on('click', function (e) { loadReviews(i); }); }(i)); } 

  Cover 1 Cover 2 Cover 3 Cover 4 Cover 5 

Answer 5

您正面临着典型的“内部回调”环境问题。

我们来看看代码。

有这个：

 $("#cover1").click(function () { loadReviews(1); }); 

意味着函数内部的代码仅在发生click事件时运行，而不是在附加事件时运行，因此运行时将以这种方式运行：

 // First, attaches the event $("#cover1").click(function () { // This will be run when user clicks, so will be called last loadReviews(1); }); // The runtime will continue right BEFORE the click callback is run 

所以在你的循环中，运行时会这样：

 for (i = 1; i < 12; i++) { // var i value starts from 0. And attaches the click event $("#cover" + i).click(function () { // Runs after all the loop is done (when the i value is 12) loadReviews(i); }); // loop continue BEFORE the content of the click callback is run } 

修复循环的一种快速方法是使用函数内部声明的变量调用函数，因此外部操作永远不会更改它。

 function attachClick(id) { // This will be run on each loop, creating a id variable // that will be unique for this context $("#cover" + id).click(function () { loadReviews(id); }); } for (i = 1; i < 12; i++) { // Call the function passing the i variable as parameter attachClick(i); } 

你可以通过创建匿名函数的方式（与上面完全相同但不在其他地方创建命名函数）：

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

这些是修改代码以使其工作的最快方法，但是当以这种方式处理事件时，最好只将一个事件附加到父级，捕获单击的元素并从中获取id。 附加的事件越少，一切就越快。