Question

<body>

  <input type="text" id="search" onchange="doSearch()" />

  <div id="catalog">
  </div>

  <div id="each_track">
  </div>

  <script>
  SC.initialize({
    client_id: '*****************'
  });

  function doSearch() {
    var searchTerm = document.getElementById('search').value;

        // Search soundcloud for artists
        SC.get('/tracks', { q: searchTerm, license: 'cc-by-sa' }, function(tracks) {
          for(track in tracks) {
            var img = document.createElement('img');
            var catalog = document.getElementById('catalog');
            img.setAttribute("src",tracks[track]["artwork_url"]);
            catalog.appendChild(img);
            }
         }
        });
      };
      </script>
    </body>

在回复评论时，只需将div添加到每个img，而不是将所有图像附加到div。

Answer 1

尝试

function doSearch() {
    var searchTerm = document.getElementById('search').value;

    // Search soundcloud for artists
    SC.get('/tracks', { q: searchTerm, license: 'cc-by-sa' }, function(tracks) {
        for(track in tracks) {
            var img = document.createElement('img');
            var catalog = document.getElementById('catalog');
            img.setAttribute("src",tracks[track]["artwork_url"]);

            var div = document.createElement('div');
            div..appendChild(img);

            catalog.appendChild(div);
        }
    });
};

Answer 2

   for(track in tracks) {
        var img = document.createElement('img');
        var catalog = document.getElementById('catalog');
        var div = document.createElement('div');


        img.setAttribute("src",(tracks[track]["artwork_url"]));
        div.setAttribute("class","music");

        if((tracks[track]["artwork_url"])){
          catalog.appendChild(div);
          div.appendChild(img);
        }

与原始答案类似，if循环定位每个图像元素

Javascript，为每个对象附加一个div

2 个答案: