1

我想根据下拉选择将不同的内容加载到 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 中的内容。我错过了什么？

4

5 回答 5

2 
$(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"
            });
        });
    }
});
于 2012-07-19T23:09:05.647 回答
1

您希望在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那个时候的！
于 2012-07-19T23:07:07.703 回答
0

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

此外，所有这些 if 语句似乎有点多余。尝试使用 switch 语句。

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

或者甚至可能

x = $(this).val() + ".txt";
于 2012-07-19T23:05:56.610 回答
0

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

于 2012-07-19T23:06:21.400 回答
0 
 $('#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 中调用该函数

于 2012-07-19T23:08:17.123 回答