jQuery click function between multiple class names

Question

I am new to jQuery and I am trying to write a .click() function in jQuery that is triggered from #buttons id to .hide() and .show() elements in #cards id.

For example, if I click on .blue div it should only show() .blueCard div and hide .redCard and greenCard

<div id="buttons">
    <div class="blue">Click Me!</div>
    <div class="red">Click Me!</div>
    <div class="green">Click Me!</div>
</div>

<div id="cards">
    <div class="blueCard blue"></div>
    <div class="redCard red"></div>
    <div class="greenCard green"></div>
</div>

This code seems a bit off... and not working!

$("#buttons").each(function(){
    var buttonColors = $("#buttons").attr("class").val();
    var cardColors = $("#cards").attr("class").val();

    buttonColors.on("click", function(){
        if ($(buttonColors + cardColors).length > 0) {
            carColors.show();
        } else {}
        carColors.hide();
    });
});

Tushar · Accepted Answer · 2016-09-08 09:44:51Z

3

Bind the event on the divs and get the class of the clicked element. Show only that one in #cards and hide others.

// Bind click event on all the <div>s inside #buttons
$('#buttons div').click(function() {
    // Get the classname of the clicked div
    var className = $(this).attr('class');
    
    // Show the respective div in cards
    // Hide others
    $('#cards .' + className).show().siblings().hide();
});

#buttons div {
  width: 100px;
  height: 100px;
  margin: 10px;
  float: left;
  color: white;
  text-align: center;
}
.blue {
  background: blue;
}
.green {
  background: green;
}
.red {
  background: red;
}

#cards {
  clear: both;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="buttons">
    <div class="blue">Click Me!</div>
    <div class="red">Click Me!</div>
    <div class="green">Click Me!</div>
</div>

<div id="cards">
    <div class="blueCard blue">Blue</div>
    <div class="redCard red">Red</div>
    <div class="greenCard green">Green</div>
</div>

answered Sep 8, 2016 at 9:44

Tushar

87.4k21 gold badges164 silver badges182 bronze badges

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

3 Comments

alimarwan Over a year ago

Thanks a lot Tushar! this helps me

Tushar Over a year ago

@alimarwan You can add one class to all the divs to target them and use .siblings('.thatClass') to select only them.

alimarwan Over a year ago

sorry I deleted the commented cause I entered the wrong code, trying to modify it now but you answered... thanks

madalinivascu · Accepted Answer · 2016-09-08 09:44:34Z

0

Try this simpler code

$("#buttons > div").click(function(){
  var class= $(this).attr('class');//get the color class
 $('.cards > div').hide();//hide all cards
 $('.cards .'+class).show();//show only the cart with the color class
});

answered Sep 8, 2016 at 9:44

madalinivascu

32.4k4 gold badges41 silver badges59 bronze badges

Comments

guradio · Accepted Answer · 2016-09-08 09:45:43Z

0

$("#buttons div").click(function() {
  var buttonColors = $(this).attr("data-color");
  $('#cards div').hide()
  $('.' + buttonColors).show()
});

#cards div{display:none}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="buttons">
  <div class="blue" data-color='blue'>Click blue!</div>
  <div class="red" data-color='red'>Click red!</div>
  <div class="green" data-color='green'>Click green!</div>
</div>

<div id="cards">
  <div class="blueCard blue">blue</div>
  <div class="redCard red">red</div>
  <div class="greenCard green">green</div>
</div>

Add data-attr use it to tell which div is clicked

answered Sep 8, 2016 at 9:45

guradio

15.6k4 gold badges39 silver badges65 bronze badges

Comments

GreyRoofPigeon · Accepted Answer · 2016-09-08 09:46:17Z

You are overthinking it.

First bind the click event on #buttons div.
Then hide all the divs inside #cards.
Last, use the class of the clicked div to show the right card.

$("#buttons div").on('click', function() {
  $('#cards>div').hide();
  $('#cards>div.'+$(this).attr('class')).show();
})

#cards>div { width: 100px; height: 100px; display: none; }
#cards .blue { background: blue; }
#cards .red { background: red; }
#cards .green { background: green; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="buttons">
  <div class="blue">Click Me!</div>
  <div class="red">Click Me!</div>
  <div class="green">Click Me!</div>
</div>

<div id="cards">
  <div class="blue"></div>
  <div class="red"></div>
  <div class="green"></div>
</div>

Krzysztof Borowy · Accepted Answer · 2016-09-08 09:43:54Z

-1

The problem might be here
if($(buttonColors + cardColors).length > 0){

You don't have to use $ here, as buttonColors and cardColors are already saved.

answered Sep 8, 2016 at 9:43

Krzysztof Borowy

5581 gold badge5 silver badges21 bronze badges

Collectives™ on Stack Overflow

jQuery click function between multiple class names

5 Answers 5

3 Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

3 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related