Question

我想根据与按钮关联的类显示一组按钮。

我正在做的是抓住具有特定类的按钮的id并将它们放在相应的数组中。然后我会隐藏所有按钮而不管是什么类，然后根据按钮单击，选择一个特定的数组，并显示与数组中的id相关联的按钮。

我的问题是，当我尝试以下代码时，该节目不起作用。

$.each(cadetInfoIds, function(i, val){
    $('#categoryButtonGroup #' + i).show();
});

..但是，当我这样做时，它可以工作

$.each(cadetInfoIds, function(i, val){
    $('#categoryButtonGroup #show_info1').show();
});

以下是相关代码：

<div class="col-md-4"  id="categoryButtonGroup">
    <button type="button" class="btn cInfo mInfo dInfo fInfo" id="show_info1">Info 1</button>
    <button type="button" class="btn cInfo mInfo dInfo" id="show_info2">Info 2</button>
    <button type="button" class="btn mInfo dInfo fInfo" id="show_info3">Info 3</button>
    <button type="button" class="btn dInfo fInfo" id="show_info3">Info 3</button>
</div>


$(document).ready(function() { 
    var cInfoIds = [];
    $("#categoryButtonGroup").find(".cInfo").each(function(){ cInfoIds.push(this.id); });

    InitializePage();

    function InitializePage(){
        ShowItemsByCategory('c');
        SetButtons();
    }
    function ShowItemsByCategory(category){
        $('#categoryButtonGroup button').hide();

        switch (category) {
        case 'c':
            $.each(cInfoIds, function(i, val){
                $('#categoryButtonGroup #' + i).show();
                //$('#categoryButtonGroup #show_info1').show();
            });
            break;

Answer 1

您必须使用val而不是i，因为最后一个是数字索引。参数val包含数组元素。

$.each(cadetInfoIds, function(i, val){
    $('#categoryButtonGroup #' + val).show();
});

由于和id标识了您网页上的唯一元素，因此您不需要使用选择器层次结构。您可以获得#categoryButtonGroup

的rif

$.each(cadetInfoIds, function(i, val){
    $('#' + val).show();
});

Answer 2

您可以在想要显示所有内容时使用该类，而不是保存数组中的所有ID。

$("#categoryButtonGroup .cInfo").show();

我有一种感觉，你甚至可以摆脱switch陈述。看起来所有*Info类的第一个字母都是类别代码，因此您可以这样做：

$("#categoryButtonGroup ." + category + "Info").show();

.show（）没有处理数组中的按钮id

2 个答案: