onClick 事件 + jquery 在不同的 div 中修改类 css 样式

Question

我已经四处寻找了一段时间，但我找不到合适的解决方案，所以我注册了，这是我发布的第一个问题。我希望你能帮助我：

我正在尝试使用显示五个不同 div 的 onClick 事件创建一组五个按钮 (div)。我为每个按钮创建了一个内联代码，它可以工作，但我试图创建一个外部函数来执行任务，只需设置单击的 div（将显示黄色边框）和应该显示的 div。

我尝试编写的代码方案是：

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

边框（选择器）任务工作正常并更改了单击的 div 的边框颜色，但我无法找到一种方法来获取应该显示到 jquery 函数中的类名，它应该是 c1、c2 之一、c3、c4 或 c5。有人可以帮我解决这个问题吗？

最佳整体解决方案http://jsbin.com/UXElode/4/edit 感谢@Roko C. Buljan

Answer 1

你可以试试这样的：

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

Answer 2

只有这个怎么样：

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

还有这个：

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

要从点击的 ID 元素中提取数字，您还可以这样做：

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

and a live demo

Answer 3

尝试做这样的事情：

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

使用这个 Javascript：

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

Answer 4

这样编码怎么样？

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（带 JQuery）

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

Jsfiddle