.show() 不适用于数组中的按钮 ID

Question

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

我正在做的是获取具有特定 class 的按钮的 ID，并将它们放在相应的数组中。然后我隐藏所有按钮，而不考虑 class 然后根据按钮单击，选择特定数组并显示与数组中的 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 保存在一个数组中，您可以在想要显示所有内容时使用 class。

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

我觉得您甚至可以去掉 switch 语句。好像所有*Info class的第一个字母都是类目代码，所以可以这样：

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

.show() 不适用于数组中的按钮 ID

.show() not working on button id from array

arrays

jquery

show

show-hide