javascript - 基于 jquery 删除 div，然后根据窗口大小重新应用

Question

我是 jquery 的新手，需要帮助。我想知道一种在开始时删除 div 然后根据窗口大小重新应用单个 div 的方法。这是一个音频播放器，一个用于桌面，一个用于移动。两个播放器都设置为在页面加载时自动播放。如果我使用 .hide，隐藏的播放器就是自动播放的播放器。

网站代码:

<section id="post-player">
    <div class="player-desktop">
        <div class="container">
            <div style="display:none" id="ap2" class="audioplayer-tobe skin-wave" data-scrubbg="<?php echo get_template_directory_uri(); ?>/img/scrubbg.png" data-scrubprog="<?php echo get_template_directory_uri(); ?>/img/scrubprog.png" data-videoTitle="Audio Video" data-type="normal" data-source="http://www.podtrac.com/pts/redirect.mp3/feeds.soundcloud.com/stream/221003112-scott-johnson-27-tms-880.mp3"></div>
        </div>
    </div>
    <div class="player-mobile">
        <div class="container">
            <div style="display:none" id="ap3" class="audioplayer-tobe skin-silver" data-scrubbg="<?php echo get_template_directory_uri(); ?>/img/scrubbg.png" data-scrubprog="<?php echo get_template_directory_uri(); ?>/img/scrubprog.png" data-videoTitle="Audio Video" data-type="normal" data-source="http://www.podtrac.com/pts/redirect.mp3/feeds.soundcloud.com/stream/221003112-scott-johnson-27-tms-880.mp3"></div>
        </div>
    </div>
</section>

JS代码:

function myFunction() {
if($(window).width() > 800)
{   
    //Code to run when greater than...
        $( "div" ).remove( ".player-mobile" );
}
else
{
    //Code to run when less than...
        $( "div" ).remove( ".player-desktop" );
}
}
myFunction();


$(window).resize(function() {
myFunction();
});

播放器加载设置页面底部的JS代码:

<script>
jQuery(document).ready(function ($) {
    dzsap_init("#ap2", {
        autoplay: "on"
        ,disable_volume: 'off'
        ,skinwave_mode: 'small'
    });
    dzsap_init("#ap3", {
        autoplay: "on"
        ,disable_volume: 'on'
    });
});

Answer 1

为什么不用 CSS 媒体查询来代替 JS？

这是一个简单的 JSFiddle向您展示如何仅使用 CSS 来做到这一点，请尝试调整结果部分的大小。

CSS:

@media (min-width: 800px) {
  .player-mobile {
    display: none;
  }
}

@media (max-width: 800px) {
  .player-desktop {
    display: none;
  }
}