0

I want to be able to toggle the'text decoration' set to 'strike-through' on click. (Also, if anyone can point me in the right direction of how to make it go to the bottom of the list once clicked that would be helpful.)

$(".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>
Andy
  • 61,948
  • 13
  • 68
  • 95
Devin
  • 33
  • 4

2 Answers2

3
  • You have a typo in style.text - decoration.
  • Also, this already refers to the element you want. Just change your styles with it. You're combining both JavaSript and jQuery, which results in your errors.

This works:

$(".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>
Amirhossein Shahbazi
  • 1,082
  • 1
  • 6
  • 13
  • 1
    `${this).get(0).style.textDecoration` will also work. – Andy Aug 09 '21 at 06:38
  • @Andy, you are correct, but don't encourage people use bloatware unnecessarily for simple stuff like this. – vanowm Aug 09 '21 at 06:42
  • I just suggested a way of using the library _that the OP is already using_ to get to the solution. jQuery isn't bloatware but, I agree, it's often unnecessary. – Andy Aug 09 '21 at 06:45
  • 1
    @Andy why wrap the element in jQuery only to immediately unwrap it? Did you perhaps mean `$(this).css("text-decoration")`? – Phil Aug 09 '21 at 06:51
  • I agree. There's no logic to it. I stopped using jQuery years ago. But `get` is there for a reason. Back in 2006 jQuery was a revelation. Given the evolution of JS over the last 10 years it's become less important but it still rides on the majority of websites around the world so it's still relevant to a lot of developers. @Phil. But also the reason I upvoted Amirhossein Shahbazi's answer. – Andy Aug 09 '21 at 07:08
-1

Just use this.style.textDecoration.

For such simple task you don't need any bloatware 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>
vanowm
  • 9,466
  • 2
  • 21
  • 37