onClick事件+ jQuery在不同的div中修改类CSS样式

Question

I have been looking around for a while, but i couldn't find a proper solution, so I registered and this is the first question i'm posting. I hope you can help me:

I'm trying to create a set of five buttons (divs) with onClick event that show five diferent divs. I have created an inline code for each button and it works, but im trying to create an external function to perform the task just setting the div clicked (that will display a yellow border) and the div that should be displayed.

A scheme of the code im trying to write is:

HTML:

<div id="button1" class="button" onClick="choose(this,'c1')"></div>
<div id="button2" class="button" onClick="choose(this,'c2')"></div>
<div id="button3" class="button" onClick="choose(this,'c3')"></div>
<div id="button4" class="button" onClick="choose(this,'c4')"></div>
<div id="button5" class="button" onClick="choose(this,'c5')"></div>
<div class="c1"></div>
<div class="c2"></div>
<div class="c3"></div>
<div class="c4"></div>
<div class="c5"></div>

JAVASCRIPT-JQUERY:

function choose(button,card) {
$( "#button1" ).css("border-color", "#F1F1F1");
$( "#button2" ).css("border-color", "#F1F1F1");
$( "#button3" ).css("border-color", "#F1F1F1");
$( "#button4" ).css("border-color", "#F1F1F1");
$( "#button5" ).css("border-color", "#F1F1F1");
$( "div.c1" ).hide();
$( "div.c2" ).hide();
$( "div.c3" ).hide();
$( "div.c4" ).hide();
$( "div.c5" ).hide();
$( button ).css("border-color", "#FFCC00");
$( div.card ).show();
}

The border (selector) task works fine and changes the border color of the div clicked, but I cant find a way to take the class name that should be shown into the jquery function, it should be one of the c1, c2, c3, c4 or c5. Can someone help me with this?

Best overall solution http://jsbin.com/UXElode/4/edit thanks to @Roko C. Buljan

Answer 1

您可以尝试类似：

$("." + card).show();

Answer 2

How about having only this:

<div id="button1" class="button"></div>
<div id="button2" class="button"></div>
<div id="button3" class="button"></div>
<div id="button4" class="button"></div>
<div id="button5" class="button"></div>
<div class="c1"></div>
<div class="c2"></div>
<div class="c3"></div>
<div class="c4"></div>
<div class="c5"></div>

and this:

$('.button').click(function(){
     $('.button').css("border-color", "#F1F1F1");
     $( this ).css("border-color", "#FFCC00");
     var n = this.id.split('n')[1];
     $('.c'+ n).show();
});

To extract the number out of the clicked ID element you can also do:

     var n = this.id.match(/\d+/g);

and a live demo

Answer 3

Try to do something like this:

<div id="button1" class="button"></div>
<div id="button2" class="button"></div>
<div id="button3" class="button"></div>
<div id="button4" class="button"></div>
<div id="button5" class="button"></div>
<div class="c button1"></div>
<div class="c button2"></div>
<div class="c button3"></div>
<div class="c button4"></div>
<div class="c button5"></div>

With this Javascript:

$(".button").click(function(){
  $(".button").css("border-color", "#F1F1F1");
  $(".c").hide();
  $( this ).css("border-color", "#FFCC00");
  $( "."+this.id ).show();
});

Answer 4

How About coding it like this?

HTML

<form id="btun">
    <div id="c1" style="background-color:#F1F1F1">btn 1</div>
    <div id="c2" style="background-color:#F1F1F1">btn 2</div>
    <div id="c3" style="background-color:#F1F1F1">btn 3</div>
     <div id="c4" style="background-color:#F1F1F1">btn 4</div>
    <div id="c5" style="background-color:#F1F1F1">btn 5</div>
</form>
<form id="array">
    <div class="c1">c1</div>
    <div class="c2">c2</div>
    <div class="c3">c3</div>
    <div class="c4">c4</div>
    <div class="c5">c5</div>
</form>

JavaScript (w/JQuery)

$('#btun div').click(function () {
    var a = $(this).attr('id');
    $('.' + a).hide();
});

Jsfiddle