CODEWITHSUNDEEP
javascriptjqueryhtml
user3803699
user3803699

Reputation: 121

toggleClass based on Click Function

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/

Upvotes: 2

Views: 266

Answers (4)

niftinessafoot
niftinessafoot

Reputation: 61

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/

Upvotes: 0

jsninja
jsninja

Reputation: 46

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!

Upvotes: 0

Gregg Duncan
Gregg Duncan

Reputation: 2725

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);
});

Upvotes: 0

Ruben Yeghikyan
Ruben Yeghikyan

Reputation: 497

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>

Upvotes: 1

Related Questions