如何使用 javascript 动态更改显示不同的 div

Question

我是 javascript 和 jquery 的新手。我正在使用 flot 绘制图表，其中有 2 个条形图...

我的第一个条形图

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

现在我有一个按钮的单击事件< /strong>

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

现在我应该在按钮事件发生时写什么，以便我动态地将条形图从

更改为

Answer 1

如果我正确理解了这个问题，你想在按下按钮时隐藏/显示每个 div ....首先使用 style="display:none 隐藏

之一"，然后使用以下代码在按钮的单击上切换两者，

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

在两者上使用toggle()并隐藏当前显示的div 并显示当前隐藏的 div （希望能让感觉！）

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

});