数据选择引导按钮属性在页面加载

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进行排序的div：

​​

下面是我用来过滤的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(); 
}); 

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

任何帮助，非常感谢。

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); 

现在，而不是 “调用” 事件处理程序，只需调用你想要的功能：

$(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>