Question

我正在创建一个过滤系统，我最近开始使用无线电盒而不仅仅是按钮。我现在遇到的问题是，当用户点击按钮时，我正在刷新所有按钮状态，但他们实际点击的按钮不会变为活动状态。如果我点击另一个按钮，它会变为活动状态。

整个事情，就是它在我的实际网站上行为不当，是here。

用于设置活动按钮和过滤器的JS和jQuery：

var filters = {
    'period_months': [], 
    'period_years': [{filter_value: 2013, filter_display: "2013"}],
    'period_quarters': [{filter_value: 1, filter_display: "Q1"}]
};
draw();
$(".filter_toggle").click(function(e) {
    var key = $(this).children('input').data('filterKey');
    var value = $(this).children('input').data('filterValue');
    var display = $(this).children('input').data('filterDisplay');
    if (key === "period_months") {
        filters['period_years'] = [];
        filters['period_quarters'] = [];
    } else if ((key === "period_years") || (key === "period_quarters")) {
        filters['period_months'] = [];
    }
    toggle(key,value,display);
});
function toggle(filter_key,filter_value,filter_display) {
    var filter_exists = false;
    for (var i in filters[filter_key]) {
        if (filters[filter_key][i]['filter_value'] == filter_value) {
            filter_exists = true;
            filters[filter_key].splice(i,1);
            break;
        }
    }
    var filter_in = { filter_value: filter_value, filter_display: filter_display };
    if (!filter_exists) {
        filters[filter_key] = [];
        filters[filter_key].push(filter_in);
    }
    draw();
}
function draw() {
    $('input').prop("checked",false).parent(".btn").removeClass("active").attr("aria-pressed",false);

    for (i in filters) {    
        for (k in filters[i]) {
            $("*[data-filter-key="+i+"][data-filter-value="+filters[i][k]['filter_value']+"]")
            .prop("checked",true)
            .parent(".btn")
            .addClass("active")
            .attr("aria-pressed",true);
        }
    }
}

在period_ *过滤器的情况下，一年四季可以一起使用。如果您设置了月份或范围，则每隔一个时间段都未设置。

当我在页面加载时设置状态时，以上所有工作正常，但是当我单击新过滤器时则不行。剩下的代码就是小提琴，包括点击事件等。

Answer 1

如果我理解正确，这可能是解决方案

更新：

function clearMonths() {
    $('#period_months .filter_toggle').removeClass('active');
    $('#period_months input').prop("checked", false)
}

function clearYears() {
    $('#period_years .filter_toggle').removeClass('active');
    $('#period_years input').prop("checked", false)
}

function clearQuarters() {
    $('#period_quarters .filter_toggle').removeClass('active');
    $('#period_quarters input').prop("checked", false)
}

$(".btn-group").click(function (e) {

    if ($(this).attr('id') == 'period_months') {
        clearYears()
        clearQuarters()
        clearMonths()
    }

    if ($(this).attr('id') == 'period_years') {
        clearMonths();
        clearYears();
    }

    if ($(this).attr('id') == 'period_quarters') { 
        clearMonths();
        clearQuarters()
    }

    $(this).find('label:active input').prop("checked", true);


});

http://jsfiddle.net/25v4m6ue/5/

根据值设置复选框的活动状态

1 个答案: