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;
  }
}

Answer 2

使用jQuery show＆amp;隐藏方法如果在JS中提供功能是必须的，否则它将是更好的实践＆amp;更高效地使用@Michelem提供的CSS

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

如果您使用remove方法，则语法为：$（selector）.remove（）;即$（＆＃34; .player-mobile＆＃34;）。remove（）;但是这完全从DOM中删除了元素

Answer 3

解决了我的问题。将JS和JS结合在页面底部。

    <script type="text/javascript">
function myFunction() {
if($(window).width() > 800)
{   
//Code to run when greater than...
    $( "div" ).remove( ".player-mobile" );
    jQuery(document).ready(function ($) {
    dzsap_init("#ap2", {
        autoplay: "on"
        ,disable_volume: 'off'
        ,skinwave_mode: 'small'
    });
    dzsap_init("#ap3", {
        autoplay: "off"
        ,disable_volume: 'on'
    });
});
} else {
//Code to run when less than...
    $( "div" ).remove( ".player-desktop" );
    jQuery(document).ready(function ($) {
    dzsap_init("#ap2", {
        autoplay: "off"
        ,disable_volume: 'off'
        ,skinwave_mode: 'small'
    });
    dzsap_init("#ap3", {
        autoplay: "on"
        ,disable_volume: 'on'
    });
});
} } myFunction();


$(window).resize(function() {
myFunction();});
</script>

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

3 个答案: