0

我正在制作一个高尔夫排行榜，并且想将每隔一行的颜色更改为略带灰色......我该怎么做？

以下是我使用 ajax 获取排行榜的方法：

$.get("http://mypage.com/json/getleaderboard.php", function(data) {

    var output = '';

    output += '<li class="leaderboard-head"><span class="leaderboard-head-placement">&nbsp;</span><span class="leaderboard-name tr" key="name">Name</span><span class="leaderboard-head-points">P</span></li>';

    $.each(data, function (i, val) {
        output += '<li><span class="leaderboard-placement">' + val.placement + '</span><span class="leaderboard-name">' + val.name + '</span><span class="leaderboard-points">' + val.points + '</span></li>';
    });


    $('#leaderboardList').append(output).listview('refresh');

}, "json");

希望得到帮助并提前感谢:-)

4

3 回答 3

2

很简单，你使用 CSS 并做（假设有一个 class leaderboard-entry）：

li.leaderboard-entry {
  background-color: #efefef;
}

li.leaderboard-entry:nth-child(even) {
  background-color: #afafaf;
}

无需 JavaScript。

在更一般的说明中，您的代码应为

$.get("http://mypage.com/json/getleaderboard.php")
.done(function(data) {
    $('<li class="leaderboard-head">' + 
        '<span class="leaderboard-head-placement">&nbsp;</span>' +
        '<span class="leaderboard-name tr" key="name">Name</span>' +
        '<span class="leaderboard-head-points">P</span>' + 
      '</li>'
    ).appendTo('#leaderboardList');

    $.each(data, function (i, val) {
        $('<li class="leaderboard-entry">')
        .append($('<span class="leaderboard-placement">', {text: val.placement})) 
        .append($('<span class="leaderboard-name">', {text: val.name}))
        .append($('<span class="leaderboard-points">', {text: val.points}))
        .appendTo('#leaderboardList');
    });

    $('#leaderboardList').listview('refresh');
});

不要通过连接任意字符串来创建 HTML。这是跨站点脚本漏洞（和标记错误）的单一来源。

"json"此外，如果服务器发送 JSON 并设置正确的标头，则在 jQuery 中声明请求类型 ( ) 是多余的Content-Type。

于 2013-08-05T13:08:18.337 回答
2

您可以使用第 n 个子选择器。例如

<ul class="leaderboard">
<li class="leaderboard-head">1</li>
<li class="leaderboard-head">2</li>
<li class="leaderboard-head">3</li>
<li class="leaderboard-head">4</li>
<li class="leaderboard-head">5</li>
<li class="leaderboard-head">6</li>
</ul>

CSS

.leaderboard-head:nth-child(odd){            // Odd/Even according to your requirements
 background-color: gray;
}

请注意，这仅适用于与 CSS3 兼容的浏览器。对于其他人，您可以使用：

$(".leaderboard").children(":nth-child(odd)").each(function(){    // Odd/Even according to your requirements
    $(this).css("background", "gray");
});

小提琴

您可以删除 css/jquery，它仍然可以工作。

于 2013-08-05T13:13:30.977 回答
0

如果你摇摆不定使用 jquery 而不是 css（好一个）

$.get("http://mypage.com/json/getleaderboard.php", function(data) {

        var output = '';

        output += '<li class="leaderboard-head"><span class="leaderboard-head-placement">&nbsp;</span><span class="leaderboard-name tr" key="name">Name</span><span class="leaderboard-head-points">P</span></li>';

        $.each(data, function (i, val) {
        var color_style_class = 'blue';
        if (i % 2 == 0)
        {
            color_style_class = 'green';
        }
        else
        {
            color_style_class = 'red';
        }
            output += '<li><span class="leaderboard-placement ' + color_style_class + '">' + val.placement + '</span><span class="leaderboard-name">' + val.name + '</span><span class="leaderboard-points">' + val.points + '</span></li>';
        });


        $('#leaderboardList').append(output).listview('refresh');

    }, "json");

为 'blue' 、 'green' 和 'red' 或任何你喜欢的东西定义新的风格

于 2013-08-05T13:13:55.520 回答