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

Question

我想用一个按钮来改变这个点击。我想让它变得轻快一点，这样声音就可以安静下来了，没有声音了：

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

Answer 1

更简单的方法是只替换数据属性标记。它希望这样：

 $(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}');
     });
 });