Question

我正在尝试切换youtube视频的数据属性，这是我目前拥有的HTML

<a id="bgndVideo" class="player" data-property="{videoURL:'https://youtu.be/KW2JUfgQct0',containment:'.video-section', quality:'high', autoPlay:true, mute:true, opacity:1}">bg</a>

<a class="muteButton" href="#">Mute</a>

我正在尝试将数据属性从“mute：true”更改为“mute：false”

我找到了一个有用的教程，但不是数据，而是说支持

 $(document).ready(function(){

     $(".muteButton").click( function (){
        $(this).data('mute', !$(this).data('mute'));
    });

    });

这在我找到的教程中运作良好但是当我将其添加到网站时没有任何反应，我做错了什么？

Answer 1

它是Toggle 'data-property' with a button & jquery

的副本

<a id='bgndVideo' class='player' data-property='{"videoURL":"https://youtu.be/KW2JUfgQct0" , "containment":".video-section", "quality":"high", "autoPlay":true, "mute":true, "opacity":1}'>bg</a> 
<a class="muteButton btn btn-default" href="#">Click me to Mute</a>
<div id="muteValueDiv"></div><br>
<div id="bgndVideoDataPropDiv"></div>
$(document).ready(function () {
      $(".muteButton").click(function () {

                $(bgndVideo).data('property').mute = !$(bgndVideo).data('property').mute;

                $('#muteValueDiv').html('After negation Mute Value is - ' + $(bgndVideo).data('property').mute);

                $('#bgndVideoDataPropDiv').html('After updating data property, data property is ' + JSON.stringify( $(bgndVideo).data('property')));
     });
});

Answer 2

这应该对你有用..它更新静音属性并替换为新的静音属性。

$(document).ready(function(){    
  $(".muteButton").click( function (){
    var a= $('#bgndVideo').data('property');
            a.mute=!a.mute;
    alert($('#bgndVideo').data('property').mute);
    alert(JSON.stringify(a));
    $(".id").html('<a id="bgndVideo" class="player" data-property='+JSON.stringify(a)+'>bg</a>')
  });    
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="id">
 <a id="bgndVideo" class="player" data-property='{"videoURL": "https://youtu.be/KW2JUfgQct0", "containment": ".video-section", "quality":"high", "autoPlay":true, "mute":true, "opacity":1}'>bg</a>
</div>
<a class="muteButton" href="#">Mute</a>

https://jsfiddle.net/

使用jquery将声音从静音更改为静音

2 个答案: