0

我对 Javascript 和 jQuery 有点陌生，但我会尝试解释我的问题。我制作了一个简单的页面，其中包含一个文本字段（电影名称）和一个下拉菜单（将移动评分 1-5）。当用户单击“添加电影”按钮时，这些值将被放入一个数组中，该数组被推送到另一个数组，因此该数组如下所示[[grade, "moviename"]]：然后我动态创建：<li> "moviename" <span> "grade" </span> </li>并且movienamne 和grade 在页面上显示为列表元素。这工作正常，但现在我想要两个按钮，按最高和最低等级对 li 元素列表进行排序......

[
    [
        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 元素，然后打印出新列表，但所有值都进入一个列表元素。如何获取数组的单独值，然后将每个值打印为列表元素？或者，如果可以直接对列表进行排序而不删除它？我想要做的是按列表元素内的 span 元素中显示的数字对列表进行排序。有人知道如何做到这一点吗？

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);

但这当然会导致整个数组进入一个列表元素，我希望将特定值分配给特定列表元素，并使其按跨度元素中的数字排序...

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

button_high.click(function() {

    $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 回答