Question

编辑：我的代码全部保存在$(document).ready(function() {}内，因为我的html代码是在我的javascript文件中动态生成的，我在使用.click()时遇到问题给予使用

$('.movies_cell').click(function(){
    var tmp = $(this).index();
});

原：我在页面上有20个div元素，其中一个.movies_cell类都是从ajax文件生成的。所有的div都是在名为#movies的容器div中创建的。

任何一个.movies_cell div都可以点击以显示一个模态框，因为我将根据点击的内容将json文件中的信息放入该模态中，我需要知道哪个div被点击了，例如，如果它是第5个div我想知道第5个div被点击然后将该数字存储在变量中，如果它是第2个或第3个我希望该数字存储在变量中然后清除另一个.movies_cell div被点击了。

我将如何编写javascript或jquery脚本来完成此操作？：（

谢谢！

  $('#myMovies').click(function () {
      $.getJSON('data/movies.json', function (allData) {
          $.each(allData, function (i, field) {
              $('#movies').append(function () {
                  var movies = '<div class="movies_cell">';
                  movies += '<div class="movies_image">';
                  movies += '<a href="#openModal"><img src="img/movies/' + (field.image) + '" alt="' + (field.name) + ' Poster" style="width: 100%; height: 100%"></a>';
                  movies += '</div>';
                  movies += '<div class="movies_detail">';
                  movies += '<a href="#openModal"><h1>' + (field.name) + '</h1></a>';
                  movies += '<img src="img/rating/' + (field.myRating) + '.png" alt="movie rating" style="margin: auto;">';
                  movies += '</div>';
                  movies += '</div>';
                  counter++;
                  console.log(counter);
                  return movies;
              });
          });
      });
  });

Answer 1

您可以使用.index()吗？它是项目集合的 从零开始的 索引，例如class="movies_cell"

$('.movies_cell').click(function(){
    var tmp = $(this).index();
});

jsFiddle Demo

Answer 2

使用事件委托。（https://api.jquery.com/on#direct-and-delegated-events）在顶部

 $('#movies').on( "click", ".movies_cell > div", function() {
   var tmp = $(".movies_cell > div").index(this);
   console.log(tmp);
});

然后

 $('#myMovies').click(function () {
//rest of code

我如何捕获在容器<div>中单击了哪个数字<div>并将其存储在变量中

2 个答案: