jquery 循环if语句工作，直到你切换制表符,非常奇怪的问题

kb5ga3dv  于 2023-11-17  发布在  jQuery
关注(0)|答案(1)|浏览(107)

我使用aQuery将mysql查询转换为json输出文件，我有一个函数来循环json数据并为匹配条件的项目追加html。我有3个jquery标签，Season 1，Season B和All Cards。
当我第一次加载页面时，它默认为Season 1选项卡，所有与Season 1匹配的数据的html都显示得很好。如果我切换到Season B选项卡，则所有内容都加载。但是当我切换回Season 1时，什么都不加载。也单击All Cards什么都不加载。
我添加了控制台输出，我可以看到一切都符合条件。例如，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
...

型
最后切换到All选项卡它会跳过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，所以没有缓存问题

jquery

1条答案

按热度按时间
7gcisfzg

7gcisfzg1#

经过多次尝试和错误后，最终还是解决了这个问题，因为选项卡的单击功能将自定义属性作为整数拉取
必须把它转换成字符串

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

字符串

赞(0）分享  回复(0）举报  2023-11-17
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备2022004421号-2 NULL123 https://www.null123.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com