onClick事件+ jQuery在不同的div中修改類CSS樣式

Question

我已經尋找了一段時間，但是我找不到合適的解決方案，所以我注冊了，這是我發布的第一個問題。 我希望你能幫幫我：

我正在嘗試使用onClick事件創建一組五個按鈕（div），以顯示五個不同的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();
}

border（選擇器）任務可以正常工作，並且可以更改單擊的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);

和現場演示

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

傑斯菲德爾