是否可以用另一个html替换一些html?

时间:2016-04-19 11:45:07

标签: javascript jquery html

我想用按钮更改点击次数。我希望它是一个切换按钮,以便声音可以静音和取消静音:

<div class="video-player" data-property="{videoURL:'<?php echo $shop_isle_yt_link; ?>', containment:'.module-video', startAt:0, **mute:false**, autoPlay:true, loop:true, opacity:1, showControls:false, showYTLogo:false, vol:25}"></div>

<div class="video-player" data-property="{videoURL:'<?php echo $shop_isle_yt_link; ?>', containment:'.module-video', startAt:0, **mute:true**, autoPlay:true, loop:true, opacity:1, showControls:false, showYTLogo:false, vol:25}"></div>

我试过这样:

?>
                <!-- Youtube player start-->
                <div class="video-player" data-property="{videoURL:'<?php echo $shop_isle_yt_link; ?>', containment:'.module-video', startAt:0, mute:true, autoPlay:true, loop:true, opacity:1, showControls:false, showYTLogo:false, vol:25}"></div>
                <!-- Youtube player end -->
                <?php


        echo '</section>';

    endif; /* END VIDEO */  

    ?>

    <script>
$(document).ready(function(){
    $("#mutebutton").click(function(){
        $(".video-player").replaceWith('<div class="video-player" data-property="{videoURL:'<?php echo $shop_isle_yt_link; ?>', containment:'.module-video', startAt:0, mute:false, autoPlay:true, loop:true, opacity:1, showControls:false, showYTLogo:false, vol:25}"></div>');
    });
});
</script>


    <button id="mutebutton">Mute / unmute</button>

1 个答案:

答案 0 :(得分:0)

更简单的方法是仅替换data-property标记。 它希望如此:

 $(document).ready(function(){
     var toggle = false;
     $("#mutebutton").click(function(){
         if(toggle) toggle = false; else toggle = true;
         $(".video-player").data('property', '{videoURL:'<?php echo $shop_isle_yt_link; ?>', containment:".module-video", startAt:0, mute:' + toggle ? 'true' : 'false' + ', autoPlay:true, loop:true, opacity:1, showControls:false, showYTLogo:false, vol:25}');
     });
 });