0

私はJavascriptとjQueryを初めて使用しますが、私の問題を説明しようとします. 1 つのテキスト フィールド (映画の名前) と 1 つのドロップダウン (ムーブを 1 ～ 5 に評価) を含む単純なページを作成しました。ユーザーが「ムービーを追加」ボタンをクリックすると、これらの値が配列に入れられ、別の配列にプッシュされて、配列は次のようになります[[grade, "moviename"]]。次に、次を動的に作成します<li> "moviename" <span> "grade" </span> </li>。movienamne と grade は、リスト要素としてページに表示されます。これは問題なく動作しますが、li 要素のリストを最高グレードと最低グレードで並べ替える 2 つのボタンが必要です...

[
    [
        5,
        ”movie name1”
    ],
    [
        3,
        ”movie name2”
    ],
    [
        1,
        ”movie name3”
    ],
    [
        2,
        ”movie name4”
    ]
]

リストが上記のように見える場合、たとえば、ソートを最低順で押すと、リストが次のように表示されるようにします。

[
    [
        1,
        ”movie name3”
    ],
    [
        2,
        ”movie name4”
    ],
    [
        3,
        ”movie name2”
    ],
    [
        5,
        ”movie name1”
    ]
]

配列をソートし、現在の li 要素を削除してから新しいリストを出力する関数を作成しようとしましたが、すべての値が 1 つのリスト要素に入ります。配列の個別の値を取得し、各値をリスト要素として出力するにはどうすればよいですか? または、リストを削除せずに直接並べ替えることができる場合はどうなりますか? 私がしようとしているのは、リスト要素内のスパン要素に示されている番号でリストをソートすることです。誰かがこれを行う方法を知っていますか?

var button_high = $('#high');
var button_low = $('#low');
var betyg_array = new Array();
button_high.click(function() 
{
    $("#filmerna ul li").remove();
    betyg_array.sort(function(a,b){return b-a});
    var film = betyg_array;
    var grade = betyg_array;
    var element = '<li class="lista">' + film + '<span class="betyg">'+ grade +'</span></li>';
    film_list.append(element);

しかし、もちろん、配列全体が1つのリスト要素になるという結果になります。特定の値を特定のリスト要素に入れ、スパン要素の番号でソートする必要があります...

    var button_high = $('#high');
var button_low = $('#low');
var betyg_array = new Array();

button_high.click(関数() {

    $list = $("#filmerna ul");
    $("#filmerna ul li").remove();

    betyg_array.sort(function(x,y){return y[1]-x[1]});

$.each(betyg_array, function() {
    $nyFilm = $("<li />");
    $nyFilm.attr("class", "lista")
    $nyFilm.text($(this)[0]);

    $nyBetyg = $("<span />");
    $nyBetyg.attr("class", "betyg");
    $nyBetyg.text($(this)[1]);

    $nyBetyg.appendTo($nyFilm);
    $nyFilm.appendTo($list);
});

});

4

1 に答える 1

1

さて、元のJSに基づいて、これでうまくいくはずです。. .

var button_high = $('#high');
var button_low = $('#low');
var betyg_array = new Array();
button_high.click(function() {
    $list = $("#filmerna ul");
    $list.empty();

    betyg_array.sort(function(a,b){return b-a});

    $.each(betyg_array, function() {
        $newMovie = $("<li />");
        $newMovie.attr("class", "lista")
        $newMovie.text($(this)[1]);

        $newGrade = $("<span />");
        $newGrade.attr("class", "betyg");
        $newGrade.text(new Array($(this)[0] + 1).join('*'));

        $newGrade.appendTo($newMovie);
        $newMovie.appendTo($list);
    });
});

これらの<li>要素を追加するためのよりコンパクトな方法がありますが、明確にしたかったのです。

于 2013-03-07T16:11:07.610 に答える