CODEWITHSUNDEEP
javascriptjqueryhtmlcss
alimarwan
alimarwan

Reputation: 85

jQuery click function between multiple class names

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

Upvotes: 4

Views: 3221

Answers (5)

GreyRoofPigeon
GreyRoofPigeon

Reputation: 18123

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>

Upvotes: 0

guradio
guradio

Reputation: 15555

$("#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>

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

Upvotes: 0

Tushar
Tushar

Reputation: 87203

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>

Upvotes: 3

madalinivascu
madalinivascu

Reputation: 32354

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

Upvotes: 0

Krzysztof Borowy
Krzysztof Borowy

Reputation: 548

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

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

Upvotes: -1

Related Questions