我正在做作业,正在创建购物清单。每当我单击复选按钮时,购物商品都应切换到一个在文本中插入一行的类。我的代码起作用了,但是它切换了所有购物物品。有人可以提供一些指导吗?
注意:我无法更改HTML或CSS;严格来说,这是JavaScript设置。另外,我希望基本方向正确。我不是在寻找直接答案。最后,我刚刚开始该项目,所以我正在寻求有关此问题的帮助。预先感谢!
这里是页面的链接...
问题是您在所有元素上切换了类。 $(".shopping-item").toggleClass("shopping-item__checked");
您可以使用$(this).closest("li").find(".shopping-item").toggleClass("shopping-item__checked");
,它将仅切换您单击的li
的button
中的元素。
demo
$(".shopping-item-delete").click(function() {
$(this).parent().parent().remove();
})
//Check and Uncheck Shopping Items
$(".shopping-item-toggle").click(function() {
$(this).closest("li").find(".shopping-item").toggleClass("shopping-item__checked");
});
* {
box-sizing: border-box;
}
body {
font-family: 'Roboto', sans-serif;
}
button,
input[type="text"] {
padding: 5px;
}
button:hover {
cursor: pointer;
}
#shopping-list-item {
width: 250px;
}
.container {
max-width: 600px;
margin: 0 auto;
}
.shopping-list {
list-style: none;
padding-left: 0;
}
.shopping-list>li {
margin-bottom: 20px;
border: 1px solid grey;
padding: 20px;
}
.shopping-item {
display: block;
color: grey;
font-style: italic;
font-size: 20px;
margin-bottom: 15px;
}
.shopping-item__checked {
text-decoration: line-through;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<h1>Shopping List</h1>
<form id="js-shopping-list-form">
<label for="shopping-list-entry">Add an item</label>
<input type="text" name="shopping-list-entry" id="shopping-list-entry" placeholder="e.g., broccoli">
<button type="submit">Add item</button>
</form>
<ul class="shopping-list">
<li>
<span class="shopping-item">apples</span>
<div class="shopping-item-controls">
<button class="shopping-item-toggle">
<span class="button-label">check</span>
</button>
<button class="shopping-item-delete">
<span class="button-label">delete</span>
</button>
</div>
</li>
<li>
<span class="shopping-item">oranges</span>
<div class="shopping-item-controls">
<button class="shopping-item-toggle">
<span class="button-label">check</span>
</button>
<button class="shopping-item-delete">
<span class="button-label">delete</span>
</button>
</div>
</li>
<li>
<span class="shopping-item shopping-item__checked">milk</span>
<div class="shopping-item-controls">
<button class="shopping-item-toggle">
<span class="button-label">check</span>
</button>
<button class="shopping-item-delete">
<span class="button-label">delete</span>
</button>
</div>
</li>
<li>
<span class="shopping-item">bread</span>
<div class="shopping-item-controls">
<button class="shopping-item-toggle">
<span class="button-label">check</span>
</button>
<button class="shopping-item-delete">
<span class="button-label">delete</span>
</button>
</div>
</li>
</ul>
</div>