Question

我为layerslider插件制作了这个Jquery按钮。但该按钮仅在您加载页面时有效。当您浏览网站并返回到hoempage时，该按钮不再起作用。

有什么建议吗？

function(element) {
    jQuery(document).on('click', '.mute-video', function (){
        if (jQuery("video").prop('muted')) {
            jQuery("video").prop('muted', false);
            jQuery(this).addClass('unmute-video');

        } else {
            jQuery("video").prop('muted', true);
            jQuery(this).removeClass('unmute-video');
        }
    });
}

HTML：

<video id="myVideo" width="100%" height="100%" autoplay loop  >
    <source src="/startransfer/wp-content/uploads/2015/10/StarTransfer-promo-aanhanger.mp4" type="video/mp4">

CSS：

.mute-video {
    background:url(http://www.welzendesign.com/startransfer/wp-content/uploads/2015/10/volume47.png) no-repeat center;
    background-size:42px;
    background-color: rgba(0, 0, 0, 0.5);
    border:0 !important;
    width:64px;
    height:64px;
    text-indent:-999px;
    bottom: 0px;
    left: 0px;
    text-decoration:none;
}
.unmute-video {
    background:url(http://www.welzendesign.com/startransfer/wp-content/uploads/2015/10/volume47.png) no-repeat center;
    background-size:42px;
    background-color: rgba(0, 0, 0, 0.5);
    border:0 !important;
    text-decoration:none;
}

.unmute-video:focus,
.unmute-video:active {
    outline: none;
}

.mute-video:focus,
.mute-video:active {
    outline: none;
}

提前致谢！

Answer 1

导航后添加.mute-video事件的click按钮似乎不相同。

似乎某些导航或重新渲染页面会重写一个新按钮。

确保在每个页面渲染或导航时调用您的函数。

Jquery静音仅适用于首页加载

1 个答案: