javascript - html5中的video的muted属性代码能不能这么写？想优雅点没生效啊！！

问题描述

问 题

先贴上起作用的代码，然后第二段代码是弄成传参数的方法却不生效，请问该怎么写？

    muted.addEventListener('click', function () {
        if (video.muted != true) {
            video.muted = true;
        } else {
            video.muted = false;
        }
    });
    
    loop.addEventListener('click', function () {
        if (video.loop != true) {
            video.loop = true;
        } else {
            video.loop = false;
        }
    });

上面这段代码运行正常
下面这段没有起作用，谁能教一下怎么写？

    muted.addEventListener('click', mulo(muted));
    loop.addEventListener('click', mulo(loop));
    
    function mulo($ccc) {
        if (video.$ccc != true) {
            video.$ccc = true;
        } else {
            video.$ccc = false;
        }
    }

解决方案

// 大概可以这么写
muted.addEventListener('click', mulo.bind(null, 'muted'));
loop.addEventListener('click', mulo.bind(null, 'loop'));

function mulo($ccc) {
  video[$ccc] = ! video[$ccc];
}

解释：

1. mulo() 会直接调用方法，所以需要使用bind

2. js里访问属性如果是变量，只能使用jsObj[attr]这种方式，不能使用.

另外建议的方法是给dom加上data-name="muted"属性，然后用下面的代码

// 大概可以这么写
muted.addEventListener('click', mulo);
loop.addEventListener('click', mulo);

function mulo() {
  var $ccc = this.dataset.name;
  video[$ccc] = ! video[$ccc];
}

这篇关于javascript - html5中的video的muted属性代码能不能这么写？想优雅点没生效啊！！的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！