jQuery Klickfunktion zwischen mehreren Klassennamen

Question

Ich bin neu in jQuery und ich versuche, eine .click() Funktion in jQuery zu schreiben, die von #buttons ID .hide() and .show() Elemente in #cards id ausgelöst wird.

Zum Beispiel, wenn ich auf klicken .blue div sollte es nur Show() .blueCard div und verstecken .redCard und Green Card

<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> 

Dieser Code scheint ein bisschen weg ... und funktioniert nicht!

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

Answer 1

Bind das Ereignis auf dem div s und die Klasse des klickten Elements erhalten. Zeige nur diesen in #cards und verstecke andere.

// 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>

Answer 2

könnte das Problem
if($(buttonColors + cardColors).length > 0){

hier Sie müssen bereits gespeichert nicht verwenden $ hier, wie buttonColors und cardColors sind.

Answer 3

Versuchen Sie, diese einfachen 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 
}); 

Answer 4

$("#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. hinzufügen data-attr es verwenden, zu sagen, welche div

Answer 5

geklickt wird Sie Grübeln es.

Zuerst binden Sie das Klickereignis an #buttons div.
Dann verstecken Sie alle Divs innerhalb #cards.
Zuletzt verwenden Sie die class des angeklickten Div, um die richtige Karte anzuzeigen.

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