时间戳

首页 > 解决方案 > 我对这个 JQUERY 和 CSS 做错了什么？

javascript - 我对这个 JQUERY 和 CSS 做错了什么？

问题描述

我希望能够在点击时将“文本装饰”设置为“删除线”。（另外，如果有人能指出我如何让​​它在点击后进入列表底部的正确方向，那将很有帮助。）

$(".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>

标签： javascripthtmljquery

解决方案

  • 你有一个错字style.text - decoration。
  • 另外，this已经引用了您想要的元素。只需用它改变你的风格。您正在结合 JavaSript 和 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>

推荐阅读