Question

我正在基于响应式布局移动div，这需要它们位于不同视口的不同位置。在下面的示例中，我希望它们如此移动，它们按预期执行...除非，当我在页面上有多个“release”div时，它会将每个“soundcloud”div添加到每个“释放”中。因此，如果我有3'释放'div，每个div有3'soundcloud'div。如何编辑代码，以便附加每个“版本”中的“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>

jQuery附加每个项目

1 个答案: