将简单的 jQuery 转换为 JavaScript [关闭]答案

【问题标题】：Convert simple jQuery to JavaScript [closed]将简单的 jQuery 转换为 JavaScript [关闭]
【发布时间】：2013-11-09 18:13:48
【问题描述】：

谁能帮我把这个 jQuery 代码转换成 JavaScript？因为我正在使用的库不能使用 jQuery，而且我对此一无所知。

这里是：

$(document).ready(function(){
$('.fs-button').on('click', function(){
    var elem = document.getElementById('fullscreen');
    if (document.webkitFullscreenElement) {
        document.webkitCancelFullScreen();
    } else {
        elem.webkitRequestFullScreen();
    };
}); });

谢谢。

【问题讨论】：

这个问题似乎是题外话，因为它只是要求 OP 可以轻松找出自己的解决方案

标签： javascript jquery fullscreen

【解决方案1】：

你需要使用addEventListener

function addEventListenerByClass(className, event, fn) {
    var list = document.getElementsByClassName(className);
    for (var i = 0, len = list.length; i < len; i++) {
        //Attach event
        list[i].addEventListener(event, fn, false);
    }
}

//Iterate and attach event againts class name
addEventListenerByClass('fs-button', 'click', myfunction); 

function myfunction(){
    var elem = document.getElementById('fullscreen');
    if (document.webkitFullscreenElement) {
        document.webkitCancelFullScreen();
    } else {
        elem.webkitRequestFullScreen();
    };
}

【讨论】：

只要您只针对 IE 9 以后的版本，这将起作用。您可能还应该将此代码放在 onload 事件处理程序中，例如在body 元素上。

【解决方案2】：

在 html 中

<button onclick="myfunction()" class="fs-button">Click</button>

在 JS 中

function myfunction(){
 var elem = document.getElementById('fullscreen');
    if (document.webkitFullscreenElement) {
        document.webkitCancelFullScreen();
    } else {
        elem.webkitRequestFullScreen();
    };
}

【讨论】：

但附带说明：jQuery 的on 函数会自动将此事件添加到以后/动态添加的类名为fs-button 的元素中，而这个JS 版本不会。
您正在考虑on 的三参数版本。