Question

我有以下jQuery根据data-filter属性显示/隐藏Div：

$(document).ready(function(){
$(".filter-button").click(function(){
    var value = $(this).attr('data-filter');
    if(value == "all")
    {
        $('.filter').show('1000');
    }
    else
    {
        $(".filter").not('.'+value).hide('3000');
        $('.filter').filter('.'+value).show('3000');
    }
});

我也有这个jQuery对Divs进行排序：

$('#alpha-button-az').on('click', function() {
    var alphabeticallyOrderedDivs = $divs.sort(function(a,b){
        return $(a).find("h2").text() > $(b).find("h2").text();
    });
    $(".profile-container").html(alphabeticallyOrderedDivs);
});

$('#alpha-button-za').on('click', function() {
    var alphabeticallyOrderedDivs = $divs.sort(function(b,a){
        return $(a).find("h2").text() > $(b).find("h2").text();
    });
    $(".profile-container").html(alphabeticallyOrderedDivs);
});

这是我用来过滤Div的HTML：

<div class="btn-group" data-toggle="buttons">
    <label class="btn btn-default filter-button" data-active-class="location-filter" data-filter="all"><input type="radio" name="options" id="all" autocomplete="off" checked>All</label>
    <label class="btn btn-default filter-button" data-active-class="location-filter" data-filter="new"><input type="radio" name="options" id="new" autocomplete="off" checked>Newcastle</label>
    <label class="btn btn-default filter-button" data-active-class="location-filter" data-filter="man"><input type="radio" name="options" id="man" autocomplete="off" checked>Manchester</label>
    <label class="btn btn-default filter-button" data-active-class="location-filter" data-filter="dub"><input type="radio" name="options" id="dub" autocomplete="off" checked>Dublin</label>
    <label class="btn btn-default filter-button" data-active-class="location-filter" data-filter="win"><input type="radio" name="options" id="win" autocomplete="off" checked>Winnersh</label>
    <label class="btn btn-default filter-button" data-active-class="location-filter" data-filter="lon"><input type="radio" name="options" id="lon" autocomplete="off" checked>London</label>
</div>
<br />
<div class="btn-group" data-toggle="buttons">
    <label id="alpha-button-az" class="btn btn-default" data-active-class="alpha-sort"><input type="radio" name="options" autocomplete="off" checked>A-Z</label>
    <label id="alpha-button-za" class="btn btn-default" data-active-class="alpha-sort"><input type="radio" name="options" autocomplete="off" checked>Z-A</label>
</div>

我想要做的是能够在页面加载时选择每个按钮中的一个。

到目前为止，我已经得到了这个：

$(document).ready(function() {
    $("#alpha-button-az").click();
    $(".filter-button").click();
});

这适用于A-Z按钮（在页面加载时选择了A-Z），但由于过滤器使用的是自定义属性，因此我不知道如何选择特定按钮。目前，它正在选择组中的最后一个按钮。

非常感谢任何帮助。

Answer 1

这是第一个代码片段，略有变化：

$(document).ready(function(){
$(".filter-button").click(function(){
    var value = this.dataset.filter; // Note this code change btw!

    if(value == "all")
    {
        $('.filter').show('1000');
    }
    else
    {
        $(".filter").not('.'+value).hide('3000');
        $('.filter').filter('.'+value).show('3000');
    }
});

和第二个：

function sortAlphaAscending() {
    var alphabeticallyOrderedDivs = $divs.sort(function(a,b){
        return $(a).find("h2").text() > $(b).find("h2").text();
    });
    $(".profile-container").html(alphabeticallyOrderedDivs);
}

function sortAlphaDescending() {
    var alphabeticallyOrderedDivs = $divs.sort(function(b,a){
        return $(a).find("h2").text() > $(b).find("h2").text();
    });
    $(".profile-container").html(alphabeticallyOrderedDivs);
}

$('#alpha-button-az').click(sortAlphaAscending);
$('#alpha-button-za').click(sortAlphaDescending);

现在，而不是＆＃34;呼叫＆＃34;事件处理程序，只需调用你想要的函数：

$(document).ready(function() {
    // Do functions here to data
    sortAlphaAscending();

    // Activate elements here
    $(".selector").attr("active");
});

免责声明：我99％确定您要添加active属性，但我还没有对其进行测试。

编辑：此更新的HTML可以正常运行。请将active属性添加到要开始作为活动元素的每个元素。我无法在您的问题中看到您的HTML按钮，例如：

<button id="some-button">...</button>

会变成

<button id="some-button" active>...</button>

选择页面加载时带有数据属性的Bootstrap按钮

1 个答案: