Question

我的jQuery不起作用。

当页面加载时我想显示并隐藏一些元素。

使用change()功能可以正常工作，但在使用load()

时无效

这是我的代码

$(document).ready(function () {
        const text = '.text-type';
        const sticker = '.sticker-type';
        const image = '.image-type';
        var collection = "form div[data-form-collection='item'] select";

        $(collection).load(function(){
            var type = $(this).val();
            var row = $(this).closest("[data-form-collection='item']");

            switch (type) {
                case 'text':
                    row.find(text).show();
                    row.find(sticker).hide();
                    row.find(image).hide();
                    break;
                case 'sticker':
                    row.find(text).hide();
                    row.find(sticker).show();
                    row.find(image).hide();
                    break;
                case 'image':
                    row.find(text).hide();
                    row.find(sticker).hide();
                    row.find(image).show();
                    break;
            }
        })
})

我的代码出了什么问题？

谢谢。

Answer 1

jQuery上的

load()函数用于窗口obj或img标记，而不是其他元素。使用ready时，您可以假设它已全部加载，然后您可以在没有加载功能的情况下执行相同操作。

像这样：

$(document).ready(function () {
    const text = '.text-type';
    const sticker = '.sticker-type';
    const image = '.image-type';
    var collection = "form div[data-form-collection='item'] select";

    var type = $(collection).val();
    var row = $(collection).closest("[data-form-collection='item']");

    switch (type) {
        case 'text':
            row.find(text).show();
            row.find(sticker).hide();
            row.find(image).hide();
            break;
        case 'sticker':
            row.find(text).hide();
            row.find(sticker).show();
            row.find(image).hide();
            break;
        case 'image':
            row.find(text).hide();
            row.find(sticker).hide();
            row.find(image).show();
            break;
     }

})

抱歉我的英语不好......

Answer 2

.load（）在加载OnInit

后被触发

JQuery Load

描述：从服务器加载数据并将返回的HTML放入匹配的元素

我猜你正在寻找.ready（）
Jquery Ready

描述：指定在DOM完全加载时要执行的函数。

顺便说一下，加载页面后会发出.load(url, callback)

加载页面时jQuery load（）无法正常工作

2 个答案: