如何使用jquery和ajax通过单击两个按钮中的一个来交替显示两个图形？

我有两个图形要显示给用户。当页面加载时，我希望第一个图形在其下方显示两个按钮。我想在用户单击第一个按钮（无需重新加载页面）后，用第二个图形替换第一个图形。然后，如果用户单击第二个按钮，我希望第一个图形重新出现

我已经成功地通过使用下拉菜单实现了我想要做的事情。我只是不知道如何调整我的代码，使其与按钮而不是下拉菜单一起工作。任何帮助都将不胜感激

jQuery：

$('#atl_graph').on('change',function(){

    $.ajax({
        url: "/atlanta",
        type: "GET",
        contentType: 'application/json;charset=UTF-8',
        data: {
            'selected': document.getElementById('atl_graph').value

        },
        dataType:"json",
        success: function (data) {
            Plotly.newPlot('graph', data );
        }
    });
})

HTML:

选择打印类型。。。。
没有季节
季节
var图={{graph | safe}}；
Plotly.plot（'graph'，graphs，{}）；

你能试试这个吗

<button type="button" onclick="reloadGraph('No Seasons');">No Seasons</button>
<button type="button" onclick="reloadGraph('Seasons');">Seasons</button>

function reloadGraph(type) {
  $.ajax({
        url: "/atlanta",
        type: "GET",
        contentType: 'application/json;charset=UTF-8',
        data: {
            'selected': type

        },
        dataType:"json",
        success: function (data) {
            Plotly.newPlot('graph', data );
        }
    });
}

没有季节
季节
函数重载图（类型）{
$.ajax({
网址：“/亚特兰大”，
键入：“获取”，
contentType:'application/json；charset=UTF-8'，
数据：{
“选定”：类型
},
数据类型：“json”，
成功：功能（数据）{
Plotly.newPlot（'图形'，数据）；
}
});
}

$（'.atl_graph'）。在（'click'，function（）上{
$（'#selected'）.html（this.value）；
$（'.atl_graph'）.removeClass（'selected'）；
$（this.addClass（'selected'）；
$.ajax({
网址：“/亚特兰大”，
键入：“获取”，
contentType:'application/json；charset=UTF-8'，
数据：{'selected'：this.value}，
数据类型：“json”，
成功：功能（数据）{
Plotly.newPlot（'图形'，数据）；
}
});
});
。已选定{
背景颜色：绿色；
颜色：#fff；
}
#精选{
背景色：#ffffcc；
}
.左{
边界半径：3px 0 3px；
右边距：0；
}
.对{
边界半径：0 3px 3px 0；
左边距：0；
}
钮扣{
背景色：#fff；
颜色：#000；
填充：3倍；
边框：1px纯色灰色；
}

选择打印类型。。。。
没有季节
var图={{graph | safe}}；
Plotly.plot（'graph'，graphs，{}）；
您选择了：

您有一个ID为atl\U graph

的select控件。让我们假设您有两个按钮，分别是id

szns

和

noszns

。让我们给每个按钮赋予相同的类，

btnSznChg

，这样两个按钮的点击都可以通过一次点击事件检测到

以下是它的工作原理：

<button id="szns" class="btnSznChg">Seasons</button>
<button id="noszns" class="btnSznChg">No Seasons</button>

$('.btnSznChg').click(function(){
    var tmp = this.id;
    var getgraph = (tmp == 'szns') ? 'Seasons' : 'No Seasons';

    $.ajax({
        url: "/atlanta",
        type: "GET",
        contentType: 'application/json;charset=UTF-8',
        data: {
            'selected': getgraph /* getgraph value is either "Seasons" or "No Seasons" */

        },
        dataType:"json",
        success: function (data) {
            Plotly.newPlot('graph', data );
        }
    });

});

季节
没有季节

这工作做得很好。非常感谢你！我对代码做的一个小调整是将所选类（.selected）添加到第一个按钮。通过这种方式，第一个按钮显示为选中，并与页面加载时显示的图形相匹配。很好的调整，很好的主意：）这对两个图形很好，但如果有两个以上的图形则不行。为什么不把图形名分配给按钮值，然后使用它呢？首先Dustin说他有两个图形，所以我就用了，其次我想演示三元运算符，以防他不熟悉。一个有用的小算符。

<button id="szns" class="btnSznChg">Seasons</button>
<button id="noszns" class="btnSznChg">No Seasons</button>

$('.btnSznChg').click(function(){
    var tmp = this.id;
    var getgraph = (tmp == 'szns') ? 'Seasons' : 'No Seasons';

    $.ajax({
        url: "/atlanta",
        type: "GET",
        contentType: 'application/json;charset=UTF-8',
        data: {
            'selected': getgraph /* getgraph value is either "Seasons" or "No Seasons" */

        },
        dataType:"json",
        success: function (data) {
            Plotly.newPlot('graph', data );
        }
    });

});