CODEWITHSUNDEEP
jqueryjson
ahgk
ahgk

Reputation: 423

How to toggle the element that I got with json?

I made a page that append json data with jquery as seen below. The thing I want to do is, toggling the description parts when clicking each image. I wrote a click function as you see, but it didn't work. What should I do?

$(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();
        }


      );

    }
  });
});
body {
  background-color: gray;
}
.container-fluid {
  padding-top: 40px;
}
<!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>

Upvotes: 1

Views: 1468

Answers (1)

Cue
Cue

Reputation: 2759

There are many methods that can make this process far less arduous. For starters, it's not a good practice to attach event handlers within a for loop (or any loop for that matter, pun intended).

Instead, we can extract that logic and place it outside for delegation (which is the norm especially when manipulating dynamic DOM elements).

Here's one way you can achieve your goal without too much fiddling:

$(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>');
    }
  });
});

In a nutshell, you're adding a data attribute to the image which simply references the ID (note: including the #) of the element you wish to toggle. This way you can keep the event binding logic outside of the loop and will toggle all present and future elements with said attribute.

Hope this helps.

Upvotes: 1

Related Questions