如何更改使用javascript動態顯示不同的div

Question

我是javascripting和jquery的新手。我用畫海軍報

我的第一個柱狀圖

<div id="bar1" style="width:600px;height:300px;"></div> 
$(function() { 

var css_id = "#bar1"; 
var data = [ 
    {label: 'foo',color:'red', data: [[1,300], [2,300], [3,300], [4,300], [5,300]]}, 
    {label: 'bar',color:'blue', data: [[1,800], [2,600], [3,400], [4,200], [5,0]]}, 
    {label: 'baz',color:'green', data: [[1,100], [2,200], [3,300], [4,400], [5,500]]}, 
]; 
var options = { 
    series: {stack: 0, 
      lines: {show: false, steps: false }, 
      bars: {show: true, barWidth: 0.4, align: 'center',},}, 
    xaxis: {ticks: [[1,'One'], [2,'Two'], [3,'Three'], [4,'Four'], [5,'Five']]}, 
}; 

$.plot($(css_id), data, options); 

});​ 

我的第二個圖形

<div id="bar2" style="width:600px;height:300px;"></div> 
var data = [ 
    {label: 'foo', color:'red', data: [[1,300], [2,300], [3,300], [4,300], [5,300]]}, 
    {label: 'bar', color:'blue', data: [[1,800], [2,600], [3,400], [4,200], [5,0]]}, 
    {label: 'baz', color:'yellow', data: [[1,100], [2,200], [3,300], [4,400], [5,500]]}, 
    ]; 

$.plot($("#bar2"), data, { 
series: { 
    stack: 1, 
    bars: { 
     show: true, 
     barWidth: 0.6, 
     fill:1 
    } 
} 
});​ 

現在我有一個圖表中，我有2個條形圖...點擊事件按鈕

$(document).ready(function() { 
...... 
}); 

現在我應該怎麼寫上的按鈕事件，這樣我動態地改變我的條形圖從<div id="bar1">到<div id="bar2">

Answer 1

如果我理解正確的問題，你要隱藏/顯示上的新聞每div的次數按鈕....首先使用style="display:none"隱藏<div>之一，然後使用以下代碼來對都與隱藏當前顯示div上的按鈕

$(document).ready(function() { 
    $('#idofbutton').click(function() { 
     $('#bar1,#bar2').toggle(); 
    }); 
}); 

click的切換既使用toggle()並顯示當前隱藏div（希望是有道理的！）

Docs for toggle()

Answer 2

設置#bar2的CSS來display:none

var toggle = true; 
$("#button").click(function() 
{ 
    if(toggle) 
    { 
     $("#bar1").hide(); 
     $("#bar2").show(); 
     toggle = false; 
    } 
    else 
    { 
     $("#bar1").show(); 
     $("#bar2").hide(); 
     toggle = true; 
    } 

});