为什么类选择器不是基于点击操作创建的？ [英] Why class selector is not created on click action?
问题描述
以下是HTML代码：
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript">
var list = document.querySelector('ul');
list.addEventListener('click', function(ev) {
if (ev.target.tagName === 'LI') {
ev.target.classList.toggle('done');
}
}, false);
</script>
</head>
<body>
<ul>
<li>Buy milk</li>
<li>Take the dog for a walk</li>
<li>Exercise</li>
<li>Write code</li>
<li>Play music</li>
<li>Relax</li>
</ul>
</body>
</html>
下面是CSS代码：
li {
list-style-type: none;
position: relative;
margin: 2px;
padding: 0.5em 0.5em 0.5em 2em;
background: lightgrey;
font-family: sans-serif;
}
li.done {
background: #CCFF99;
}
li.done::before {
content: '';
position: absolute;
border-color: #009933;
border-style: solid;
border-width: 0 0.3em 0.25em 0;
height: 1em;
top: 1.3em;
left: 0.6em;
margin-top: -1em;
transform: rotate(45deg);
width: 0.5em;
}
上面的HTML代码不会创建 class =done
Above HTML code does not create class="done" on click action, when launched on browser.
在 =nofollow> fiddle 相同的代码工作正常。
On fiddle the same code works fine.
推荐答案
$ c>< head> 在加载< body> 的内容之前执行。因此，当绑定事件和事件未绑定时，不会在 DOM 中找到元素。
As the code is included in <head> it is executed before the content of the <body> is loaded. So, the elements are not found in the DOM when binding events and event is not bound.
有两种方法来解决这个问题。
There are two ways to solve this problem.
-
将代码包含在
DOMContentLoaded事件回调。
Wrap the code in
DOMContentLoadedevent callback.
document.addEventListener('DOMContentLoaded', function () {
var list = document.querySelector('ul');
list.addEventListener('click', function (ev) {
if (ev.target.tagName === 'LI') {
ev.target.classList.toggle('done');
}
}, false);
});
更新小提琴： https://jsfiddle.net/tusharj/pr2hw6c1/
详细了解DOMContentLoaded： https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded
Read More about DOMContentLoaded: https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded
将代码移至< body>
Move the code to the end of <body>, so that when the script is executed, all the DOM elements are loaded.
strong>注意：您还可以使用加载事件在完全 之后执行脚本代码加载，但这将等待页面上的所有资源（图像，帧等）加载，这是不必要的绑定在元素上的事件。供参考阅读 DOMContentLoaded和加载事件之间的差异
Note: You can also use load event to execute the script code after DOM is completely loaded, but this will wait for all the resources(image, frames, etc.) on the page to load which is not necessary to bind the event on the elements. For reference read Difference between DOMContentLoaded and Load events
为什么jsfiddle中的代码相同？
Why does the same code in jsfiddle works?
jsfiddle为脚本应该包含的位置提供了四个选项。您可以从库列表下方的左侧面板中设置此选项。
jsfiddle provides four options for where the script should be included. You can set this option from the left panel, below the libraries list.
-
onLoad：这与窗口的加载事件相同。代码被包装在load事件的回调中，因此不能从外部访问函数/变量。例如，从HTML内嵌处理常式。 -
onDomReady：这与DOMContentLoadedreadyof jquery，这里也是代码包装 -
c>：这意味着JS代码将添加到头中。没有换行意味着代码不包含在任何函数中，如load和DOMContentLoaded。因此，定义的函数/变量是全局的。 -
没有wrap - in Body：脚本加载到< body>元素。
onLoad: This is same asloadevent of window. The code is wrapped in the callback of theloadevent so, the functions/variables cannot be accessed from outside of it. Ex. From HTML inline handlers.onDomReady: This is same asDOMContentLoadedorreadyof jquery, here also the code is wrappedNo wrap - in Head: This means the JS code will be added in thehead.No wrapmeans the code is not wrapped in any function like inloadandDOMContentLoaded. So the functions/variables defined are global.No wrap - in Body: The script is loaded at the end of<body>element.
现在我们知道脚本该选项在小提示中，脚本位置的选项设置为 onLoad ，所以代码工作。该代码将适用于除之前的所有选项。
Now that we know how the script behaves for each of the option, in the fiddle, the option for script location is set to onLoad, so the code works. The code will work for all options except No wrap - in Head.
更多关于jsfiddle docs < a href =http://doc.jsfiddle.net/basic/introduction.html#fiddle-settings-sidebar =nofollow> http://doc.jsfiddle.net/basic/introduction.html#fiddle- settings-sidebar
Read more about this on jsfiddle docs http://doc.jsfiddle.net/basic/introduction.html#fiddle-settings-sidebar
这篇关于为什么类选择器不是基于点击操作创建的？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
