javascript - jQuery 为每个项目追加

Question

我正在根据响应式布局移动 div，这要求它们位于不同视口(viewport)的不同位置。在下面的示例中，我希望它们按预期移动，它们按预期移动...除了，当我在页面上有多个“release”div 时，它会获取每个“soundcloud”div 并将其附加到每个“release”。因此，如果我有 3 个“release”div，每个 div 都有 3 个“soundcloud”div。如何编辑代码，以便附加每个“release”中的“soundcloud”div，而不附加任何其他内容。

$(function () {
  var mobile = false;
  var desktop = false;
  var $window = $(window);
  function checkWidth() {
    var windowsize = $window.width();
    if (windowsize <= 1024) { 
      if (!mobile) {
        $(".release .soundcloud").appendTo(".release .info");
      }
      mobile = true;
      desktop = false;
    } else {
      if (!desktop) {
        $(".release .soundcloud").appendTo(".release .show-hide");
      }
      mobile = false;
      desktop = true;
    }
  }
  checkWidth();
  $(window).resize(checkWidth);
});

编辑添加 HTML:

<div class="release clearfix">
    <span class="show-details open-close">&#10133;</span>
    <figure class="artwork">
        <img src="assets/images/artwork1.jpg" alt="Album Artwork">
    </figure>
    <div class="info">
        <h1 class="title">Title</h1>
        <div class="soundcloud">
            <iframe width="100%" height="166" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/12345678"></iframe> 
        </div>                              
    </div>              
    <div class="show-hide">
        <div class="options clearfix">
            <p>&pound;9.99</p>
            <p><span>&#59197;</span><a href="#" target="_blank">Buy</a></p>
        </div>
        <div class="tracks">
            <h3>Tracklisting</h3>
            <ul>
                <li>Track 1</li>
            </ul>
            <h3>Produced by</h3>
            <p>Author</p>
        </div>
        <div class="further-info">
            <h3>Release Date</h3>
            <p>14/12/2013</p>
        </div>                      
    </div>
</div>

Answer 1

正如 @Cuberto 提到的，使用 javascript 来实现它并不是一个好主意。

但是要尝试一下，您可以迭代每个 release 元素，并为 release div 内的相应子元素执行附加操作。

function checkWidth() {
    var windowsize = $window.width();

    var $releaseDivs = $('.release');

    if (windowsize <= 1024) { 
      if (!mobile) {
        $('.release').each(function() {
              $('.soundcloud', this).appendTo($('.info', this));
        });
      }
      mobile = true;
      desktop = false;
    } else {
      if (!desktop) {
         $('.release').each(function() {
              $('.soundcloud', this).appendTo($('.show-hide', this));
        });
      }
      mobile = false;
      desktop = true;
    }
  }

我没有尝试过，但你可以尝试一下

@media (max-width: 1024px) {
  .hide-mobile {
    display: none;
  }
}

HTML

 <div class="soundcloud hide-mobile">
            <iframe width="100%" height="166" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/12345678"></iframe> 
        </div>