Question

我想根据下拉选项将不同的内容加载到div中。这是迄今为止的代码：

    $(document).ready(function(){
    var x;
    $('#loadCategory').change(function(){
        if ($(this).val() == "videos"){
            x = 'videos.txt';
        }
        if ($(this).val() == "ads"){
            x = 'ads.txt';
        }
        if ($(this).val() == "widgets"){
            x = 'widgets.txt';
        }
        if ($(this).val() == "images"){
            x = 'images.txt';
        }else{
            x = 'videos.txt';
        }
    });
    $('.content').load(x,function(){
            $('img').wrap('<li></li>');
            $('.media-container').pajinate({
                items_per_page : 7
            });

            $( ".media-container li" ).draggable({
                appendTo: ".playlist ol",
                helper: "clone"
            });
    });

当我把“alert（x）;”在.change（）中，它显示正确的值，但不会更改.content中的内容。我错过了什么？

Answer 1

$(document).ready(function(){
    $('#loadCategory').on('change', function(){
        loadContent(this.value+'.txt');
    });

    function loadContent(file) {
        $('.content').load(file, function(){
            $('img').wrap('<li></li>');
            $('.media-container').pajinate({
                items_per_page : 7
            });

            $( ".media-container li" ).draggable({
                appendTo: ".playlist ol",
                helper: "clone"
            });
        });
    }
});

如果确实需要else语句，您可以随时执行：

$('#loadCategory').on('change', function(){
    var t = this.value,
        x = (t=='videos'||t=='ads'||t=='widgets'||t=='images')?this.value:'videos';
    $('.content').load(x+'.txt', function(){
        $('img').wrap('<li></li>');
        $('.media-container').pajinate({
            items_per_page : 7
        });

        $( ".media-container li" ).draggable({
            appendTo: ".playlist ol",
            helper: "clone"
        });
    });
});

修改

试试这个：

$(document).ready(function(){ loadContent('videos.txt'); $('#loadCategory').on('change', function(){ loadContent(this.value+'.txt'); }); function loadContent(file) { $('.content').load(file, function(){ $('img').wrap('<li></li>'); $('.media-container').pajinate({ items_per_page : 7 }); $( ".media-container li" ).draggable({ appendTo: ".playlist ol", helper: "clone" }); }); } });

Answer 2

您希望在change事件发生时执行加载部分 - 因此您需要将该代码移动到该事件的事件处理程序中：

//assign the event handler
$('#loadCategory').change(function(){
    //prepare the value of x
    //corrected your conditions by adding else
    if ($(this).val() == "videos"){
        x = 'videos.txt';
    }
    else if ($(this).val() == "ads"){
        x = 'ads.txt';
    }
    else if ($(this).val() == "widgets"){
        x = 'widgets.txt';
    }
    else if ($(this).val() == "images"){
        x = 'images.txt';
    }
    else{
        x = 'videos.txt';
    }

    //load the right content based on x
    $('.content').load(x,function(){
            $('img').wrap('<li></li>');
            $('.media-container').pajinate({
                items_per_page : 7
            });

            $( ".media-container li" ).draggable({
                appendTo: ".playlist ol",
                helper: "clone"
            });
    });    
});

在原始代码中，会发生以下情况：

声明局部变量x（undefined）
分配更改事件处理程序
根据x加载内容，当时为undefined！

Answer 3

您的更改事件处理程序中没有$('.content').load()。

所有那些if语句似乎都有点多余。尝试使用switch语句。

switch ($(this).val()) {
    case "videos":
        x = "videos.txt";
        break;
    case "widgets":
        x = "widgets.txt";
        break;
    ... etc ..
}

或者甚至可能

x = $(this).val() + ".txt";

Answer 4

您应该将内容加载到与“更改”事件挂钩的函数中。

Answer 5

 $('#loadCategory').change(function(){
    if ($(this).val() == "videos"){
        x = 'videos.txt';
    }
    if ($(this).val() == "ads"){
        x = 'ads.txt';
    }
    if ($(this).val() == "widgets"){
        x = 'widgets.txt';
    }
    if ($(this).val() == "images"){
        x = 'images.txt';
    }else{
        x = 'videos.txt';
    }

    $('.content').load(x,function(){
        $('img').wrap('<li></li>');
        $('.media-container').pajinate({
            items_per_page : 7
        });

        $( ".media-container li" ).draggable({
            appendTo: ".playlist ol",
            helper: "clone"
        });


  });

如果你仍然希望它第一次加载，那么将加载部分放在一个函数中并在onchange中调用该函数

从下拉列表中更改装入项目

5 个答案: