.addClass using else if statements - jQuery?

Question

I'm very new to JavaScript and jQuery. I want to make the white button at the top change color after these list of colors is pressed. For example, when the pink button is pressed, the white button turns pink, and then when the purple button is pressed, it changes to purple:

https://i.sstatic.net/q4zA0.png

I've managed to get it to work when the pink button is pressed using this function that selects the ids of the li element and the .addClass() method.

//When clicking diff colours
$("ul").on("click", "li", function(){
    if ($("li").is("#p")) {
        $("button").addClass("pink");
    } else if ($("li").is("#pu")) {
        $("button").addClass("purple");
    }
    color = $(this).css("background-color");
});

However, using else if doesn't seem to work when, for example, pressing the purple button.

Here is the HTML snippet:

<div id="colorSelect">
    <ul>
        <li class="pink" id="p"></li>
        <li class="purple" id="pu"></li>
        <li class="red" id="r"></li>
        <li class="blue" id="b"></li>
        <li class="green" id="g"></li>
        <li class="orange" id="o"></li>
    </ul>
</div>

guradio · Accepted Answer · 2017-01-20 10:43:21Z

2

//When clicking diff colours
$("ul").on("click", "li", function() {
  $("button").removeAttr('class').addClass($(this).attr('class'))
});

.white {
  background-color: white
}
.pink {
  background-color: pink
}
.purple {
  background-color: purple
}
.red {
  background-color: red
}
.blue {
  background-color: blue
}
.green {
  background-color: green
}
.orange {
  background-color: orange
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="colorSelect">
  <ul>
    <li class="pink" id="p">pink</li>
    <li class="purple" id="pu">purple</li>
    <li class="red" id="r">red</li>
    <li class="blue" id="b">blue</li>
    <li class="green" id="g">green</li>
    <li class="orange" id="o">orange</li>
  </ul>
</div>
<button>button</button>

Assuming the li has only one class

answered Jan 20, 2017 at 10:43

guradio

15.6k4 gold badges39 silver badges65 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

guradio Over a year ago

@MeerDeen what do you mean?

guradio Over a year ago

@MeerDeen check again

guradio Over a year ago

@MeerDeen glad it works as you needed it now :) happy coding

Rory McCrossan · Accepted Answer · 2017-01-20 10:43:43Z

To solve this you can make the code simpler by applying the class of the clicked element directly to the <button>. This avoids the need for the if statement at all. Try this:

//When clicking diff colours
$("ul").on("click", "li", function() {
  $('button').removeClass().addClass(this.className);
});

button {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 0;
}
.pink { background-color: pink; }
.purple { background-color: purple; }
.red { background-color: red; }
.blue { background-color: blue; }
.green { background-color: green; }
.orange { background-color: orange; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button></button>

<div id="colorSelect">
  <ul>
    <li class="pink" id="p"></li>
    <li class="purple" id="pu"></li>
    <li class="red" id="r"></li>
    <li class="blue" id="b"></li>
    <li class="green" id="g"></li>
    <li class="orange" id="o"></li>
  </ul>
</div>

Satpal · Accepted Answer · 2017-01-20 10:41:58Z

The result is expected as $('li').is("#p") will always evaluate to true as it will evaluate against all li element not the current element.

You need to use current element context i.e. this instead of li when evaluating it.

//When clicking diff colours
$("ul").on("click", "li", function(){
    if ($(this).is("#p")) {
        $("button").addClass("pink");
    } else if (this).is("#pu")) {
        $("button").addClass("purple");
    }
    color = $(this).css("background-color");
});

It would be better to use ID

//When clicking diff colours
$("ul").on("click", "li", function(){
    if (this.id == "p") {
        $("button").addClass("pink");
    } else if (this.id == "pu") {
        $("button").addClass("purple");
    }
    color = $(this).css("background-color");
});

Mihai Matei · Accepted Answer · 2017-01-20 10:44:06Z

1

That's because you always refer to the first li instead of the pressed one:

$("ul").on("click", "li", function(){
    if ($(this).is("#p")) {
        $("button").addClass("pink");
    } else if ($(this).is("#pu")) {
        $("button").addClass("purple");
    }
    color = $(this).css("background-color");
});

edited Jan 20, 2017 at 10:44

answered Jan 20, 2017 at 10:42

Mihai Matei

24.3k5 gold badges34 silver badges50 bronze badges

Collectives™ on Stack Overflow

.addClass using else if statements - jQuery?

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related