Question

情景：

存在一个简单的html页面，页面上有很少的按钮（例如白天，星期）和页面的BOTTOM（filter1和filter2）以及中心的图形。

图表显示基于所选过滤器的数据。

问题：

当用户选择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"，您可以设置按钮的样式并进行测试，而无需求助于全局变量。

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

2 个答案: