循环 if 语句在切换选项卡之前一直有效。很奇怪的问题

loop if statement works until you switch tabs. Very odd issue

提问人：Korey 提问时间：10/27/2023 最后编辑：ShadowKorey 更新时间：10/28/2023 访问量：59

问：

我正在使用 ajax 将 mysql 查询转换为 json 输出文件，并且我有一个函数来遍历 json 数据并为匹配条件的项目附加 html。我有 3 个 jquery 选项卡，第 1 季、第 B 季和所有卡牌。

当我第一次加载页面时，它默认为第 1 季选项卡，并且与第 1 季匹配的数据的所有 html 都显示得很好。如果我切换到 B 季选项卡，一切都会加载。但是当我切换回第 1 季时，什么都没有加载。此外，单击“所有卡”不会加载任何内容。

我添加了控制台输出，我可以看到一切都符合条件。例如，if 语句查找 tabContainer=“1” aka Season 和 cardSet=“Base” aka Set。控制台输出从字面上看是 Base 1 Didn't match Base 1，这意味着它确实匹配，但无论出于何种原因，它完全跳过 if 语句并直接转到 else。

$(document).ready(function() {
    $("#tabs").tabs();
    var data;


    function clearCardImages(tabContainer) {
        $("#cardslist-s" + tabContainer).empty();
        console.log("Clearing card data from #cardslist-s" + tabContainer);
    }

    function loadAndDisplayData(cardSetTerm, tabContainer) {
        $.ajax({
            url: "get_card_data.php",
            dataType: "json",
            success: function (jsonData) {
                data = jsonData;
                console.log("Data contents: ", data);
                console.log("The current selection is Season " + tabContainer + " " + cardSetTerm + " set.");
                    $.each(data, function (index, card) {
                        var cardImage = card.card_image;
                        var cardSet = card.card_set;
                        var rarity = card.rarity;
                        var season = card.season;
                        var setNumber = card.set_number;
                        var cardCn = card.card_cn;
                        var pocketfurCn = card.pocketfur_cn;
                        console.log("Card Set:", cardSet, "Season:", season);

                        if (cardSet === cardSetTerm && season === tabContainer) {
                            console.log(cardSetTerm + " " + tabContainer + " matched", cardSet, season);
                            $("#cardslist-s" + tabContainer).append("<a href='../../../pfmedia/cards/" + cardImage + "' target='_blank' data-cardset='" + cardSet + "'>" +
                                "<img id='cardimg' src='../../../pfmedia/cards/s" + season + "/" + cardSet + "/" + cardCn + "-thumb.gif' alt='' title='Season " + season + " ◽️ " + rarity + " ◽️ " + cardSet + " ◽️ " + pocketfurCn + "' />" +
                                "</a>");
                        }
                        else if (cardSet === "all" && season === "all") {
                            console.log("Creating All Card images.");
                            $("#cardslist-sall").append("<a href='../../../pfmedia/cards/" + cardImage + "' target='_blank' data-cardset='" + cardSet + "'>" +
                                "<img id='cardimg' src='../../../pfmedia/cards/s" + season + "/" + cardSet + "/" + cardCn + "-thumb.gif' alt='' title='Season " + season + " ◽️ " + rarity + " ◽️ " + cardSet + " ◽️ " + pocketfurCn + "' />" +
                                "</a>");
                        }
                        else  {
                            console.log(cardSetTerm + " " + tabContainer + " didn't match", cardSet, season);
                        }
                    });
    
            }
        });
    }

    $(".filter-link").click(function (e) {
        e.preventDefault();
        var cardSetTerm = $(this).data("cardset");
        var tabContainer = getActiveTab();
        console.log("Filtering cards by Season " + tabContainer + " " + cardSetTerm + " set");

        clearCardImages(tabContainer);
        loadAndDisplayData(cardSetTerm, tabContainer);
    }); 

    $(".tabsnav").click(function () {
        var tabContainer = $(this).data("tab");

        console.log("Switching to tab: " + tabContainer);
        console.log("Data contents: ", data);

        clearCardImages(tabContainer);

        if (tabContainer === "all") {
            console.log("Loading " + tabContainer + " cards...");
            loadAndDisplayData("all", tabContainer);
        } 
        else {
            console.log("Loading Season " + tabContainer + " Base Set cards...");
            loadAndDisplayData("Base", tabContainer);
        }

    });

    function getActiveTab() {
        return $('#tabs .ui-tabs-active a').data("tab");
}
    
    loadAndDisplayData("Base", "1");
});

添加了控制台输出以确定任何问题，结果如下

最初加载页面时，它会在 if 语句处停止，因为术语匹配

Data contents:  (222) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, …]
115 The current selection is Season 1 Base set.
...
127 Base 1 matched Base 1
124 Card Set: Base Season: 1
127 Base 1 matched Base 1
124 Card Set: Base Season: 1
127 Base 1 matched Base 1
...

然后切换到第二个选项卡，它也会在 if 语句处停止，因为匹配

Switching to tab: b
163 Data contents:  (222) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, …]
99 Clearing card data from #cardslist-sb
172 Loading Season b Base Set cards...
114 Data contents:  (222) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, …]
115 The current selection is Season b Base set.
...
127 Base b matched Base b
124 Card Set: Base Season: b
127 Base b matched Base b
124 Card Set: Base Season: b
127 Base b matched Base b
...

然后切换回来，它会跳过 if 并转到 else 语句，因为它不匹配，但输出显示它仍然匹配

Switching to tab: 1
163 Data contents:  (222) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, …]
99 Clearing card data from #cardslist-s1
172 Loading Season 1 Base Set cards...
114 Data contents:  (222) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, …]
115 The current selection is Season 1 Base set.

...
124 Card Set: Base Season: 1
139 Base 1 Didn't match Base 1
124 Card Set: Base Season: 1
...

最后，切换到“全部”选项卡，它会跳过 if else 语句并跳到 else 语句，即使它符合条件

Switching to tab: all
163 Data contents:  (222) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, …]
99 Clearing card data from #cardslist-sall
168 Loading all cards...
114 Data contents:  (222) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, …]
115 The current selection is Season all all set.
124 Card Set: Cosmic Season: b
139 all all Didn't match Cosmic b
124 Card Set: Cosmic Season: b
139 all all Didn't match Cosmic b
124 Card Set: Cosmic Season: b
139 all all Didn't match Cosmic b
124 Card Set: Cosmic Season: b
139 all all Didn't match Cosmic b
124 Card Set: Cosmic Season: b
139 all all Didn't match Cosmic b
...

我已经在开发模式下测试了运行cloudflare，因此没有缓存问题

javascript jquery json

评论

0赞 TSCAmerica.com 10/27/2023
如果元素是动态添加到 DOM 中的（您的选项卡似乎就是这种情况），则单击事件可能不会按预期触发，因为它们在页面加载时不存在。您可能需要使用事件委派来处理这些情况，将事件附加到静态元素并侦听其中的事件。
0赞 Korey 10/27/2023
我更新了我的脚本以对 #tabs div 使用委派，但它仍然不起作用。这对我来说有点陌生，这几乎是你的意思吗？$（“#tabs”）.on（“点击”， “.tabsnav”， function （） { var tabContainer = $（this）.data（“tab”）;

答：

0赞 Korey 10/28/2023 #1

经过多次试验和错误后弄清楚了。这是因为选项卡的单击函数将自定义属性作为整数提取

必须将其转换为字符串

$("#tabs").on("click", ".tabsnav", function() {
    var tabContainer = $(this).data("tab").toString();

上一个：如何根据多筛选器选择在页面上对 JSON 数据进行分组和显示？

下一个：遍历 get_posts 以创建嵌套的多维数组和 JSON