add class and remove other when clicking href

Question

I've got a page with a whole bunch of links to NPC characters in a web game. You can battle each of them twice per day. What I'm hoping for is a way to have the links show in blue when a user first visits the page. The first click of any of the links will turn it orange. The second click will turn the link red. If they refresh the page of course all the links will go back to blue. I feel like the page I have should work but, of course it sin't so I'm seeking help from the AWESOME stackoverflow group :-)

here is what I have so far:

$("a").on("click", function() {
  if ($(this).hasclass("fresh")) {
    $(this).removeClass("fresh").addClass("clickedonce");
  }
  if ($(this).hasclass("clickedonce")) {
    $(this).removeClass("clickedonce").addClass("clickedtwice");
  }
});

body {
  background-image: url(https://fe623c4c56cb423a1796-41d97e3e92b81615c7f3767eb26dcf89.ssl.cf2.rackcdn.com/city/brickbg1.png);
  background-repeat: repeat;
  background-attachment: fixed;
  background-position: top;
}

.column {
  float: left;
  width: 50%;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

.fresh {
  color: blue;
}

 .clickedonce {
  color: orange;
}

.clickedtwice {
  color: red;
}

```
<html>

<head>
  <title="FJ's quick NPC Links"></title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>

<body>
  <div class="row">
    <div class="column">
      <p>NPC Lookup Links</p>
      <a target="_blank" class="fresh" href="https://www.heroesrisinggame.com/game/profile.game?user_id=1002"> lev01 Raptor</a><br>
      <a target="_blank" class="fresh" href="https://www.heroesrisinggame.com/game/profile.game?user_id=1009"> lev03 Graggleback from Dimension Z</a><br>
      <a target="_blank" class="fresh" href="https://www.heroesrisinggame.com/game/profile.game?user_id=1020"> lev04 Firebrand</a><br>
    </div>
  </div>
</body>

</html>

has class should be camel cased: .hasClass() I would probably use another class for the selctors as well. Removing the same class that the selctor is using seems bad practice. Maybe something like $(".npc-link").hasclass("fresh") — Joe Fitzsimmons, Sep 04 '19 at 20:20
`if ($(".fresh").hasclass("fresh"))` - typo aside, this isn't necessary. It's saying: *"If an element with class `fresh` has class `fresh`, then..."*. You already know it has the class `fresh`, that's how it got selected in the first place. Perhaps it's meant to be `$(this)`? — Tyler Roper, Sep 04 '19 at 20:26
Hmmm.. changed it to whats in the original post now but, it still seems to have no effect. I'm using Chrome if it matters. — Shc Final Judgement, Sep 04 '19 at 20:31
Not sure I'm allowed to link to it but, the page is here: http://cbsarge.com/npclookups.html — Shc Final Judgement, Sep 04 '19 at 20:44
Would [`.toggleClass()`](https://api.jquery.com/toggleclass/) work for your needs? — Patrick Gregorio, Sep 04 '19 at 21:12

score 1 · Accepted Answer · answered Sep 04 '19 at 21:03

The problem is that after the first if adds the class clickedonce, the second if condition will be true, so it will change it to clickedtwice. You need to use else if so that only one of them runs.

You also had incorrect capitalization of hasClass, and an extra, invisible character in the CSS rule for .clickedonce.

$("a").on("click", function() {
  if ($(this).hasClass("fresh")) {
    $(this).removeClass("fresh").addClass("clickedonce");
  } else if ($(this).hasClass("clickedonce")) {
    $(this).removeClass("clickedonce").addClass("clickedtwice");
  }
});

body {
  background-image: url(https://fe623c4c56cb423a1796-41d97e3e92b81615c7f3767eb26dcf89.ssl.cf2.rackcdn.com/city/brickbg1.png);
  background-repeat: repeat;
  background-attachment: fixed;
  background-position: top;
}

.column {
  float: left;
  width: 50%;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

.fresh {
  color: blue;
}

.clickedonce {
  color: orange;
}

.clickedtwice {
  color: red;
}

<html>

<head>
  <title="FJ's quick NPC Links"></title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>

<body>
  <div class="row">
    <div class="column">
      <p>NPC Lookup Links</p>
      <a target="_blank" class="fresh" href="https://www.heroesrisinggame.com/game/profile.game?user_id=1002"> lev01 Raptor</a><br>
      <a target="_blank" class="fresh" href="https://www.heroesrisinggame.com/game/profile.game?user_id=1009"> lev03 Graggleback from Dimension Z</a><br>
      <a target="_blank" class="fresh" href="https://www.heroesrisinggame.com/game/profile.game?user_id=1020"> lev04 Firebrand</a><br>
    </div>
  </div>
</body>

</html>

Strange... it didn't work until I surrounded it by a `$(document).ready(function(){}); — Shc Final Judgement, Sep 05 '19 at 13:10
That's the normal way to write jQuery code. See https://stackoverflow.com/questions/14028959/why-does-jquery-or-a-dom-method-such-as-getelementbyid-not-find-the-element — Barmar, Sep 05 '19 at 15:05

add class and remove other when clicking href

1 Answers1