나는 많은 순열을 시도했고, 나는 jquery에 너무 의존하고 있으며이 특정 할당에 대해서는 ...없이해야합니다 ...
나는 지금 막혔고 이것을 순수한 자바 스크립트로 작동하도록 변환 할 수 없습니다.
$.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>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();
});
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다