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 に答える