如何更改使用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; 
    } 

});