javascript - JQuery - 如何识别先前选择的按钮

Question

设想：

存在一个简单的 html 页面，页面顶部（例如，日、周）和底部（过滤器 1 和过滤器 2）和中心的图形有几个按钮。

该图显示基于选定过滤器的数据。

问题：

当用户选择 filter2 时，我需要知道用户之前在 TOP 按钮上选择了什么，以便相应地显示数据。

我正在使用全局变量来跟踪最后选择的按钮。这意味着很多 switch 语句。我想知道这是否是解决这个问题的最优雅的方法，或者有什么魔力。Jquery 上存在函数。

Answer 1

我认为最简单的方法是使用data元素本身。

<button id="day" class="graph-button" data-state="off">Day</button>
<button id="week" class="graph-button" data-state="off">Week</button>
<!-- graph here -->
<button id="filter1" class="graph-button" data-state="off">Filter 1</button>
<button id="filter2" class="graph-button" data-state="off">Filter 2</button>

然后你可以有一些像这样的jQuery：

$(function(){
    $('.graph-button').click(function(ev){
        ev.preventDefault();

        var state = $(this).data('state'),
            newState = state == 'off' ? 'on' : 'off',
            onButtons = [];

        $(this).data('state', newState);

        $('.graph-button[data-state="on"]').each(function(i, el){
            onButtons.push(this.id);
        });

        // updateGraphWith(onButtons);
    });
});

Answer 2

假设顶部按钮有class="topButton"，过滤器按钮有class="filterButton"，所有按钮都有唯一的 id，那么 jQuery 看起来像这样：

$(function(){
    var topButtons = $(".topButton").on('click', function() {
        var $this = $(this);
            id = $this.attr('id');
        if($this.hasClass('selected')) { return; }
        topButtons.removeClass('selected');
        $this.addClass('selected');
        //perform click action here
    });

    $('.filterButton').on('click', function() {
        var $this = $(this);
            id = $this.attr('id'),
            selectedTopButtonId = $('.topButton').filter('.selected').attr('id');
        //perform filter action here
    });
});

在这两种情况下，变量都会id让您知道单击了哪个按钮。

通过设置class="selected"选定的顶部按钮，您可以设置按钮样式并进行测试，而无需求助于全局变量。