为什么不在单击操作上创建类选择器？

Question

为什么不在单击操作上创建类选择器？

ove*_*nge -1 html javascript css jsfiddle

以下是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>

Run Code Online (Sandbox Code Playgroud)

下面是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;
}

Run Code Online (Sandbox Code Playgroud)

class="done"在浏览器上启动时,上面的HTML代码不会在点击操作上创建.

在小提琴相同的代码工作正常.

Answer 1

Tus*_*har 7

由于代码包含在其中,<head>因此在<body>加载内容之前执行.因此,当绑定事件和事件未绑定时,在DOM中找不到元素.

有两种方法可以解决这个问题.

在DOMContentLoaded事件回调中包装代码.

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);
});

Run Code Online (Sandbox Code Playgroud)

更新小提琴:https://jsfiddle.net/tusharj/pr2hw6c1/

阅读有关DOMContentLoaded的更多信息:https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded

将代码移动到末尾<body>,以便在执行脚本时加载所有DOM元素.

注意:您还可以使用load事件后执行脚本代码DOM被完全加载,但是这将等待所有的资源(图像,框架等)的网页上加载这是没有必要的元素绑定事件.供参考读取 DOMContentLoaded和Load事件之间的差异

为什么jsfiddle中的相同代码有效？

jsfiddle为应该包含脚本的位置提供了四个选项.您可以从库列表下方的左侧面板中设置此选项.

onLoad:这与load窗口事件相同.代码包含在load事件的回调中,因此无法从外部访问函数/变量.防爆.来自HTML内联处理程序.
onDomReady:这是相同DOMContentLoaded或readyjquery的,在这里也代码被包裹
No wrap - in Head:这意味着JS代码将被添加到head.No wrap意味着代码不包含在像load和中的任何函数中DOMContentLoaded.所以定义的函数/变量是全局的.
No wrap - in Body:脚本在<body>元素的末尾加载.

现在我们已经了解了脚本对每个选项的行为,在小提琴中,脚本位置选项设置为onLoad,因此代码可以正常工作.该代码适用于所有选项,除了No wrap - in Head.

在jsfiddle docs上了解更多相关信息http://doc.jsfiddle.net/basic/introduction.html#fiddle-settings-sidebar

归档时间：	10 年前
查看次数：	76 次
最近记录：	10 年前