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（＆＃39; [data-action =＆＃34; toggle＆＃34;]＆＃39;）。onclick = function（）{}

和getElementsByClassName和hasClass addClass

之类的函数

如何将此函数从jquery转换为纯javascript？

2 个答案: