首页 > html5中的video的muted属性代码能不能这么写?想优雅点没生效啊!!

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];
}
【热门文章】
【热门文章】