如何将此功能从jquery转换为纯javascript？

Question

我尝试了很多排列，我太依赖于jQuery，对于这个特定的任务，我必须避免...

我现在陷入困境，无法将其转换为使用纯JavaScript：

  $.root_ = $('body'); $.root_.on('click', '[data-action="toggle"]', function(e) { var $this = $(this), element = $(this).attr("data-target") || 'body'; $(element).toggleClass($(this).attr("data-class")); //clear memory reference $this = null; element = null; //save settings //saveSettings(); });

 .red-bg { background: #3d1c24; } .white-bg { background: #fff; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <html> <head></head> <body> <a href="#" data-action="toggle" data-class="red-bg">Change BG (RED)</a><br> <a href="#" data-action="toggle" data-class="white-bg">Change BG (WHITE)</a> </body> </html>

Answer 1

document.body.addEventListener('click', function(e) {
    var target = e.target;          // convenience
    var dataset = target.dataset;   // convenience
    var selector, element;
    if (dataset.action == 'toggle') {
        selector = dataset.target || 'body';
        element = document.querySelector(selector);
        if (element) {
            element.classList.toggle(dataset['class']);
        }
    }
    //save settings
    //saveSettings();
});

注意，这使用了node.classList和node.querySelector ，它们可能无法在旧版IE上运行（11岁以上-不知道，请做一些研究）-但是您可以为此类旧技术找到解决方法

注意：如果dataset.target目标的元素可以导致多个元素，请执行此操作

document.body.addEventListener('click', function(e) {
    var target = e.target;          // convenience
    if (target.dataset.action != 'toggle' && target.parentNode.dataset.action == 'toggle') {
        target = target.parentNode;
    }
    var dataset = target.dataset;   // convenience
    var selector, elements;
    if (dataset.action == 'toggle') {
        selector = dataset.target || 'body';
        elements = document.querySelectorAll(selector);
        if (elements.length) {
            [].forEach.call(elements, function(element) {
                element.classList.toggle(dataset['class']);
            });
        }
    }
    //save settings
    //saveSettings();
});

Answer 2

document.querySelector（'[data-action =“ toggle”]'）。onclick = function（）{}

和诸如getElementsByClassName和hasClass addClass之类的函数

如何将此功能从jquery转换为纯javascript？

问题描述

2 个解决方案

解决方案1
3 已采纳 2016-02-22 05:32:46

解决方案2
-1 2016-02-22 05:27:40

如何将此功能从jquery转换为纯javascript？

问题描述

2 个解决方案

解决方案1 3 已采纳 2016-02-22 05:32:46

解决方案2 -1 2016-02-22 05:27:40

解决方案1
3 已采纳 2016-02-22 05:32:46

解决方案2
-1 2016-02-22 05:27:40