toggleClass based on Click Function

Question

I am interested in changing the toggleClass depending on what is clicked on.

I want the class to be dependent on the previous click on the page.

So If I click on Letter "A" - in this case it will make the square red. Upon clicking on the square I want the .toggleClass to be .darkred

When I click on the Letter "B" - I want the .toggleClass to be .darkblue

how can i make it dynamic so it knows which class to add to the toggleClass

<script>
$("li.alpha").click(function(){
    $(".color").addClass("red").removeClass("blue").removeClass("orange");
});
$("li.bravo").click(function(){
    $(".color").addClass("blue").removeClass("red").removeClass("orange");
});
$("li.charlie").click(function(){
    $(".color").addClass("orange").removeClass("blue").removeClass("red");
});
</script>
<script>
    $(".color").on("mousedown mouseup", function(e)
{
    $(".color").toggleClass("darkblue");  // I want this class to be dynamic. It should be based on what I clicked on. so in this case I would have clicked on li.bravo
});
</script>

I want the class added in the .toggleClass to be dynamic and based on the class I am adding.

red = .darkred

blue = .darkblue

orange = .darkorange.

https://jsfiddle.net/hp6e0w3z/

Ruben Yeghikyan · Accepted Answer · 2015-10-22 17:06:02Z

1

Try this.

<script>
    $("li.alpha").click(function(){
        $(".color").addClass("red").removeClass("blue").removeClass("orange");
    });
    $("li.bravo").click(function(){
        $(".color").addClass("blue").removeClass("red").removeClass("orange");
    });
    $("li.charlie").click(function(){
        $(".color").addClass("orange").removeClass("blue").removeClass("red");
    });

    $(".color").click(function(e) {
        var color = $(this).className;
        $(".color").toggleClass('dark' + color);
    });
</script>

Also I recommend to use className to remove all other classes.

<script>
    $("li.alpha").click(function(){
        $(".color").get(0).className = '';
        $(".color").addClass("red");
    });
    $("li.bravo").click(function(){
        $(".color").get(0).className = '';
        $(".color").addClass("blue");
    });
    $("li.charlie").click(function(){
        $(".color").get(0).className = '';
        $(".color").addClass("orange");
    });

    $(".color").click(function(e) {
        var color = $(this).className;
        $(".color").toggleClass('dark' + color);
    });
</script>

$(".color").get(0).className = ''; this will remove all classes from the element.

Making the code more shorter

<script>
    $("li").click(function(){
        if($(this).hasClass('alpha')) $(".color")[0].className = 'red';
        if($(this).hasClass('bravo')) $(".color")[0].className = 'blue';
        if($(this).hasClass('charlie')) $(".color")[0].className = 'orange';
    );

    $(".color").click(function(e) {
        $(".color").toggleClass('dark' +  $(this).className);
    });
</script>

edited Oct 22, 2015 at 17:06

answered Oct 22, 2015 at 16:56

Ruben Yeghikyan

4952 gold badges6 silver badges19 bronze badges

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

1 Comment

user3803699 Over a year ago

$(".color").get(0).className = ''; $(".color").addClass("red"); -- this removed all classes but would not add the new one.

Gregg Duncan · Accepted Answer · 2015-10-22 17:18:23Z

0

Based on your fiddle. This is the way I would handle it: https://jsfiddle.net/hp6e0w3z/1/

Add a data attribute to hold the color to which you want to change it.

<ul>
    <a href="#"> <li class="alpha" data-color="red">A</li> </a>
    <a href="#"> <li class="bravo" data-color="blue">B</li> </a>
    <a href="#"> <li class="charlie" data-color="orange">C</li> </a>
<ul>
    <div class="color"> </div>

then in your javascript, on an li click get the color from the data attribute and set it to a global variable. Remove all previously set classes on your color div and add your color class back. (Although I'd make that ID='color' so you don't have to worry about removing the color class). Then add your color class.

var color; 
$("li").click(function(){
    color = $(this).data('color');
    $(".color").removeClass().addClass('color').addClass(color);
});

$(".color").on("mousedown mouseup", function(e)
{
    $(".color").toggleClass("dark" + color);
});

answered Oct 22, 2015 at 17:18

Gregg Duncan

2,7251 gold badge17 silver badges20 bronze badges

2 Comments

niftinessafoot Over a year ago

You could also get around the global by adding the data attribute to .color: $('.color').data('color','orange') and then in the mousedown function: var color = $(e.target).data('color');

Gregg Duncan Over a year ago

@niftinessafoot - good point. If the global variable is an issue, this would work nicely. jsfiddle.net/hp6e0w3z/4

jsninja · Accepted Answer · 2015-10-22 17:23:04Z

You were close.

$("li.alpha").click(function(){
   $(".color").addClass("red").removeClass("blue").removeClass("orange");
   handleSelected(this, 'red');
});
$("li.bravo").click(function(){
   $(".color").addClass("blue").removeClass("red").removeClass("orange");
   handleSelected(this, 'blue');
});
$("li.charlie").click(function(){
  $(".color").addClass("orange").removeClass("blue").removeClass("red");
  handleSelected(this, 'orange');
});

function handleSelected(li, color) {
  $('.selected').removeClass('selected');
  $('.selected').attr('color','');
  $(li).addClass('selected');
  $(li).attr('color', color);
}

$(".color").on("mousedown mouseup", function(e) {
  var str = $('.selected').attr('color');
  str = 'dark' + str.replace('selected','').trim();

  $(".color").toggleClass(str);
});

You basically assign a "selected" class to whatever LI was clicked and you add a custom attribute to that LI with the color you want. This is all done in the handleSelection() function.

When you click (DIV class='color') you grab the custom attribute color of the selected LI tag and prefix it with "dark " and then toggle!

Hope that helps!

niftinessafoot · Accepted Answer · 2015-10-22 17:32:45Z

0

You can check for the existing color classname and apply the new class name based on it.

$(".color").on("mousedown mouseup", function(e)
{
  var ele = $(e.target),
  colors = ['blue','red','orange'],
  len = colors.length,
  color='';

  while(len--){ //Cycle through existing classes until a match hits.
    if(ele.hasClass(colors[len])){
      color = 'dark' + colors[len];
      break;
    }
  }
  $(".color").toggleClass(color);
});

Updated the fiddle with above example: https://jsfiddle.net/hp6e0w3z/3/

edited Oct 22, 2015 at 17:32

answered Oct 22, 2015 at 17:13

niftinessafoot

615 bronze badges

Collectives™ on Stack Overflow

toggleClass based on Click Function

4 Answers 4

1 Comment

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related