使用按钮&切换“数据属性" jQuery的 [英] Toggle 'data-property' with a button & jquery

问题描述

我有一个全屏的youtube视频作为我正在工作的网站的背景，并且我试图通过按钮添加静音/取消静音切换.这就是我播放视频的方式:

I have a full screen youtube video as a background of a website that I'm working on and I'm trying to add a mute/unmute toggle with a button. This is how I'm pulling in the video :

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

我知道我想如何运行切换的逻辑，当单击按钮时，我想更改data属性，因此，如果其data-property为静音，则为true:true onClick，我希望将其更改为静音:false，然后再次单击时返回.

I know the logic of how I'd like to run the toggle, when the buttons clicked I would like the data property to change, so if its data-property is mute:true onClick I would like it to change to mute:false and then back when clicked again.

这就是我尝试过的-

$(document).ready(function(){

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

});

带有定位标记-

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

我一直在寻找方法，但是没有运气，我从未写过jquery，所以我迷路了，这是一件容易的事吗?

I've looked up how to do this but had no luck, I've never written jquery so I'm lost, is this an easy thing to do??

谢谢

推荐答案

bgndVideo的data属性不是有效的json语法.因此，将其视为字符串.

The data property of bgndVideo is not valid json syntax. so, its treating as string.

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

请参考jsfiddle:jsfiddle.net/u89oexea

Please refer jsfiddle: jsfiddle.net/u89oexea

这篇关于使用按钮&切换“数据属性" jQuery的的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！