CODEWITHSUNDEEP
javascriptjqueryhtmlcss
PJ Harvey
PJ Harvey

Reputation: 61

How do I add/remove class onclick for span elements

I am creating a simple quiz site. I have a page with lots of different question options that the user can choose.

They click a question and the answers list slides down into view. When they click their chosen answer which is a <span> element I want that span to have a class "correct". If they decide to choose another answer when they click on it I want the class removed from their first choice and added to the current choice, so only one span element will have a class "correct" at any one time.

I have had problems with adding/removing classes onclick. I have shown snippets of my code below. I got a few answers from W3C and SO (which work on the Fiddles) but the code does not work on my site when I test it...I am using Notepad++ to create and test this site. Below is an example of my code....any help would be most appreciated.

$("carQuestion span").click(function() {
  $('span.correct').not(this).removeClass('correct');
  $(this).addClass('correct');
});
.correct {
  color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p id="carQuestion">
  What Car is most like me?
  <span class="correct">Ferrari</span>
  <span>Limousine</span>
  <span>SUV</span>
  <span>Stationwagon</span>
</p>

Upvotes: 0

Views: 2143

Answers (4)

PJ Harvey
PJ Harvey

Reputation: 61

Thanks for everyone's help. I tried some of the options above but for some reason they just did not work on my layout. Then eureka! I found a way that worked for me on my own. If anyone else is having the same problem on Notepaad++ please see my function below which works perfectly.

<script>
    $(document).ready(function(){
        $("p span").click(function(){
            $("p, span").removeClass("correct");
            $(this).addClass("correct");
        });
    }); 
</script>

Again thanks for everyone's help.

Upvotes: 1

fboes
fboes

Reputation: 2239

Behold this completely jQuery-less answer: ;)

label {display:block;cursor:pointer;}
label span {display:inline-block;padding:0.1em 0.5em;}
input[type=radio]:checked + span {background-color:#efe;}
input[type=radio] {display:none;}
<p>
    What Car is most like me?
    <label><input type="radio" name="carQuestion" checked="checked" /><span>Ferrari</span></label>
    <label><input type="radio" name="carQuestion" /><span>Limousine</span></label>
    <label><input type="radio" name="carQuestion" /><span>SUV</span></label>
    <label><input type="radio" name="carQuestion" /><span>Stationwagon</span></label>
</p>

Upvotes: 4

Greg
Greg

Reputation: 826

I do a jsFiddle for you, see here https://jsfiddle.net/xox7kvko/1/

Don't forget use # when you want select a ID

$("#carQuestion span").click(function(){
    $("#carQuestion span").removeClass('correct');
        $(this).addClass('correct');
    });

Upvotes: 0

Luis Deras
Luis Deras

Reputation: 1269

You're missing the #.

$("#carQuestion span").click(function() {
  $('span.correct').not(this).removeClass('correct');
  $(this).addClass('correct');
});

Upvotes: 0

Related Questions