Question

我创建了一个用jquery附加json数据的页面，如下所示。我想要做的是，在单击每个图像时切换描述部分。如你所见，我写了一个点击功能，但它没有用。我该怎么办？

＆＃13;

$(document).ready(function() {
  // Your callback needs a variable to store the data in
  $.getJSON('http://ahmetgo.co.nf/l/film.json', function(data) {
    // data is your entire object, data.movies is an array
    for (var i = 0; i < data.movies.length; i++) {
      // .html() will *replace* the HTML, you want to .append()
      $('.kutu').append('<div class="col-md-3 col-sm-4 col-xs-6"><img id="res' + i + '" src="' + data.movies[i].image + '"><br><br><p class="dc" id="d' + i + '">' + data.movies[i].description + '</p></div>');

      $("#res" + i).click(function() {

          $("#d" + i).toggle();
        }


      );

    }
  });
});

＆＃13;

body {
  background-color: gray;
}
.container-fluid {
  padding-top: 40px;
}

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">

  <!--BOOTSTRAP CSS-->
  <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
  <link href="css/main.css" rel="stylesheet">

  <!--BOOTSTRAP JS-->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>

  <!--JQUERY JS-->
  <script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>

  <!--Main JS-->
  <script src="main.js"></script>

  <title></title>
</head>

<body>

  <div class="container-fluid">
    <div class="row kutu">


    </div>


  </div>



</body>

</html>

＆＃13;

Answer 1

有许多方法可以使这个过程变得更加艰巨。对于初学者来说，在for循环中附加事件处理程序（或任何循环，这是双关语）并不是一个好习惯。

相反，我们可以提取该逻辑并将其放在委托之外（这是操作动态DOM元素时的常态）。

这是你可以实现目标的一种方式，而不需要太多的摆弄：

$(document).ready(function() {
  // Delegate your toggle handler to any elements appended to the DOM
  $('img[data-toggle]').on('click', function () {
    // Toggle the target element set out in the data attribute
    $($(this).data('toggle')).toggle();
  });

  // Your callback needs a variable to store the data in
  $.getJSON('http://ahmetgo.co.nf/l/film.json', function(data) {
    // data is your entire object, data.movies is an array
    for (var i = 0; i < data.movies.length; i++) {
      // .html() will *replace* the HTML, you want to .append()
      // NOTE: All you are adding is the data-toggle to reference the <p> element
      $('.kutu').append('<div class="col-md-3 col-sm-4 col-xs-6"><img data-toggle="#d' + i + '" id="res' + i + '" src="' + data.movies[i].image + '"><br><br><p class="dc" id="d' + i + '">' + data.movies[i].description + '</p></div>');
    }
  });
});

简而言之，您要向图像添加一个数据属性，该属性只是引用您要切换的元素的ID（注意：包括＃）。这样，您可以将事件绑定逻辑保留在循环之外，并使用所述属性切换所有当前和未来元素。

希望这有帮助。

如何用json切换我得到的元素？

1 个答案: