我正在建立一个待办事项列表，我有一个功能，它将删除一个呼叫，并添加一个标签显示活动。我还有3个div，其中一个需要在单击选项卡时激活。我有标签工作，但我不能同时得到div。函数getList正在删除正确的类，但是将另一个类添加到nav而不是div。我确定它与这个＆＃39;有关。我试过电话和绑定，但没看。我也试图避免使用Jquery并使用vanilla JS。任何帮助，为什么这指向窗口而不是我的列表？
编辑：我还创建了一个JS小提琴http://jsfiddle.net/sxuvvypp/embedded/result/
(function() {
var elems = document.querySelectorAll("nav li");
var listElems = document.querySelectorAll("div > ul");
var makeActive = function() {
for (var i = 0; i < elems.length; i++)
elems[i].classList.remove('active');
this.classList.add('active');
};
var getList = function() {
for (var i = 0; i < listElems.length; i++)
listElems[i].classList.remove('listActive');
console.log(this);
this.classList.add('listActive');
}
for (var i = 0; i < elems.length; i++)
elems[i].addEventListener('click', function() {
makeActive.call(this);
getList(); //Issue here
});
})();body {
margin: 0;
padding: 0;
background-color: darkgrey;
font-family: Ariel, Charcoal, sans-serif;
}
#container {
width: 500px;
height: 525px;
background-color: #f8f7f5;
margin: 50px auto;
}
header {
background: rgba(18, 136, 255, 1);
background: -moz-linear-gradient(top, rgba(18, 136, 255, 1) 0%, rgba(8, 182, 245, 1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(18, 136, 255, 1)), color-stop(100%, rgba(8, 182, 245, 1)));
background: -webkit-linear-gradient(top, rgba(18, 136, 255, 1) 0%, rgba(8, 182, 245, 1) 100%);
background: -o-linear-gradient(top, rgba(18, 136, 255, 1) 0%, rgba(8, 182, 245, 1) 100%);
background: -ms-linear-gradient(top, rgba(18, 136, 255, 1) 0%, rgba(8, 182, 245, 1) 100%);
background: linear-gradient(to bottom, rgba(18, 136, 255, 1) 0%, rgba(8, 182, 245, 1) 100%);
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#b7deed', endColorstr='#08b6f5', GradientType=0);
margin: 0;
height: 60px;
line-height: 60px;
color: white;
text-align: center;
}
nav {
background-color: white;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
background-color: white;
overflow: hidden;
}
nav li {
float: left;
width: 33.1%;
border-right: 1px solid;
}
nav li:last-child {
border: none;
}
nav li a {
display: block;
text-align: center;
padding: 14px 16px;
text-decoration: none;
color: black;
}
.active {
background-color: #f8f7f5;
}
h1 {
margin: 0;
}
.list {
height: 250px;
overflow: hidden;
list-style: none;
display: none;
}
.input {
padding-left: 30px;
}
.listActive {
display: block;
}
/*.yesterday{
}
.tomorrow{
display: none;
}*/
input[type=checkbox] {
display: none;
}
input[type=checkbox] + label:before {
content: "";
display: inline-block;
width: 15px;
height: 15px;
vertical-align: middle;
margin-right: 8px;
background-color: #aaa;
box-shadow: inset 0px 2px 2px rgba(0, 0, 0, .3);
border-radius: 4px;
}
input[type=checkbox]:checked + label:before {
content: "\2714";
/* Tick */
color: white;
background-color: #666;
text-align: center;
line-height: 15px;
text-shadow: 0px 0px 3px #eee;
}
.menu {
border-top: 2px solid grey;
width: 500px;
}
.menu label,
.menu input {
display: block;
width: 150px;
float: left;
margin: 10px 0px;
}
.menu label {
text-align: right;
padding-right: 20px;
font-size: 20px;
}
br {
clear: left;
}<!DOCTYPE html>
<html>
<head>
<title>To Do List</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="container">
<header>
<h1>TO DO LIST</h1>
</header>
<nav>
<ul>
<li class="navButton"><a href="#">Yesterday</a></li>
<li class="navButton active"><a href="#">Today</a></li>
<li class="navButton"><a href="#">Tomorrow</a></li>
</ul>
</nav>
<div class="yesterday">
<ul class="list" id="yesterday">
<li><input type="checkbox" id="cbox"><label for="cbox"></label>first</li>
</ul>
</div>
<div class="today">
<ul class="list listActive " id="list">
<li><input type="checkbox" id="cbox"><label for="cbox"></label>second</li>
</ul>
</div>
<div class="tomorrow">
<ul class="list" id="tomorrow">
<li><input type="checkbox" id="cbox"><label for="cbox"></label>third</li>
</ul>
</div>
<div class="menu">
<label>Add Task:</label>
<input type="text" id="item">
<br>
<label>Date complete:</label>
<input type="text" id="date">
<br>
<input type="button" value="Add" id="addButton">
<input type="button" value="remove" id="removeButton">
</div>
</div>
<script type="text/javascript" src="todo.js"></script>
</body>
</html>
答案 0 :(得分：1)
由于JavaScript作用域的工作方式，全局生成的函数自然会指向窗口对象。这是因为，在幕后，全局函数声明如下：window.getList。
根据您的情况解决方法是将this作为getList函数的参数传递：
var getList = function (that){
for (var i = 0; i < listElems.length; i++)
listElems[i].classList.remove('listActive');
that.classList.add('listActive'); //apply the passed in this value as `that`
}
for (var i = 0; i < elems.length; i++)
elems[i].addEventListener('click', function(){
makeActive.call(this);
getList(this); //Pass in `this` value
});
答案 1 :(得分：0)
附加到活动时绑定元素：
for (var i = 0; i < elems.length; i++)
elems[i].addEventListener(
'click',
(function(){
makeActive.call(this);
getList();
}).bind(elems[i])
);
答案 2 :(得分：0)
首先，您需要在每个nav LI与其相应的UL之间的HTML中建立连接。这可以使用rel属性来实现。
<强> HTML
<nav>
<ul>
<li class="navButton" rel="yesterday"><a href="#">Yesterday</a></li>
<li class="navButton active" rel="today"><a href="#">Today</a></li>
<li class="navButton" rel="tomorrow"><a href="#">Tomorrow</a></li>
</ul>
</nav>
然后getList()需要：
.call(this) this属性找到与rel对应的UL节点。<强>的Javascript
var getList = function() {
for (var i = 0; i < listElems.length; i++) {
listElems[i].classList.remove('listActive');
}
var rel = this.getAttribute('rel');
var ulNode = document.getElementById(rel);
ulNode.classList.add('listActive');
}
for (var i = 0; i < elems.length; i++) {
elems[i].addEventListener('click', function() {
makeActive.call(this);
getList.call(this);
});
}