javascript - toggleClass based on Click Function -

i interested in changing toggleclass depending on clicked on.

i want class dependent on previous click on page.

so if click on letter "a" - in case make square red. upon clicking on square want .toggleclass .darkred

when click on letter "b" - want .toggleclass .darkblue

how can make dynamic knows class add 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");  // want class dynamic. should based on clicked on. in case have clicked on li.bravo }); </script> 

i want class added in .toggleclass dynamic , based on class adding.

red = .darkred

blue = .darkblue

orange = .darkorange.

https://jsfiddle.net/hp6e0w3z/

based on fiddle. way handle it: https://jsfiddle.net/hp6e0w3z/1/

add data attribute hold color want 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 javascript, on li click color data attribute , set global variable. remove set classes on color div , add color class back. (although i'd make id='color' don't have worry removing color class). add 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); });