我对这个JQUERY和CSS做错了什么?

Question

我希望能够切换'文本装饰'设置为'通过点击'。(另外，如果有人能告诉我正确的方向，如何使它在点击后进入列表的底部，这将是有帮助的。)

$(".player-name-wrapper").children().click(function() {
if ($(this).css.style.text - decoration == "line-through") {
$(this).css("text-decoration", "none");
} else {
$(this).css("text-decoration", "line-through");
}
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="qb-wrapper" class="position-wrapper hide-wrapper">
<h4 class="box-heading">QB</h4>
<div id="qb-names" class="player-name-wrapper">
<a>QB Player Name</a>
<a>Player Name</a>
<a>Player Name</a>
<a>Player Name</a>
<a>Player Name</a>
<a>Player Name</a>
</div>
</div>

Answer 1

• 您在style.text - decoration中有一个错别字
• 另外，this已经指向您想要的元素。只要改变你的风格。你结合了javascript和jQuery，这导致了你的错误。

如此:

$(".player-name-wrapper").children().click(function () {
if (this.style.textDecoration === 'line-through') {
this.style.textDecoration = "none";
} else {
this.style.textDecoration = "line-through";
}
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="qb-wrapper" class="position-wrapper hide-wrapper">
<h4 class="box-heading">QB</h4>
<div id="qb-names" class="player-name-wrapper">
<a>QB Player Name</a>
<a>Player Name</a>
<a>Player Name</a>
<a>Player Name</a>
<a>Player Name</a>
<a>Player Name</a>
</div>
</div>

Answer 2

就用this.style.textDecoration。

对于这样简单的任务，你不需要任何臃肿的jquery:

const container = document.querySelector(".player-name-wrapper");
container.addEventListener("click", e =>
{
const a = e.target;
if (a === container)
return;
a.classList.toggle("crossed");
if (a.classList.contains("crossed"))
container.appendChild(a); //move to the bottom of the list
else
container.insertBefore(a, container.querySelector(".crossed")); //move to the top of crossed list
})

.player-name-wrapper
{
display: grid;
}
.player-name-wrapper > .crossed
{
text-decoration: line-through;
}

<div id="qb-wrapper" class="position-wrapper hide-wrapper">
<h4 class="box-heading">QB</h4>
<div id="qb-names" class="player-name-wrapper">
<a>QB Player Name</a>
<a>Player Name1</a>
<a>Player Name2</a>
<a>Player Name3</a>
<a>Player Name4</a>
<a>Player Name5</a>
</div>
</div>