当前位置： 文江博客话题详情

javascript代码不再改变字体颜色

发布于 2024-08-02 21:00:27 字数 4332 浏览 4 评论 0原文

有人为我编写了一个很好的代码，但是在对表格中的输出进行一些更改后，数组选择字体不再改变，这是由以下 CSS 控制的。

.win { color: lime; font-weight: bold }

.loss { color: red; font-weight: bold }

有人可以帮我编辑代码，以便在获胜或失败时数组选择再次变为石灰和红色吗？

<html>

<head>

<title>Lotto van Terwijn</title>
<META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW" />

<style type="text/css">


body {

        font-family: Verdana, Arial, Helvetica, sans-serif;

        color: #006699;

        background-color: #FFFFF;

      }

      .name {
        float: left;
        width: 100px;

        color: #006699;

        font-weight: bold;

        margin-right: 0.50em;

      }

      .picks, .picks * {

        display: inline;

        margin: 0;

        padding: 0;

        list-style-type: none;

      }

      .picks * {

        margin: auto 0.50em;
        color: Yellow;

      }

      .win { color: lime; font-weight: bold }

      .loss { color: red; font-weight: bold }

      .drawNum, #Draws H3 {

          margin-bottom: 0;

      }


ul 
{
        list-style-type: none;
        padding-left: 0px;

}

th
{
text-align:left;
padding-right:30px;
padding-top:5px;
padding-bottom:5px;
} 

tr
{
text-align:left;
padding-right:30px;
padding-top:12px;

} 

</style>

<body>

<p><img src="../lotto/images/terwijn.png" width="547" height="188"></p>


<script type="text/javascript" src="../lotto/lotto.js"></script>

<div id="players"></div>
<div id="draws"></div>

<script type="text/javascript">

(function() {

 var players = {
    Joop   : ["6","8","16","18","26","28","32","36","38","41"],
    Marijke: ["7","10","14","18","24","29","30","34","39","40"],
    Michel : ["4","5","11","16","21","27","33","36","42","44"],
    Mario  : ["6","9","18","25","32","35","39","40","43","45"],
    Diana  : ["2","6","8","17","22","23","33","36","42","45"],
    Agnes  : ["3","5","10","15","26","29","32","37","41","44"],
    Chris  : ["5","7","8","9","11","12","16","28","30","32"],
    Jeannette: ["1","2","4","7","8","11","13","28","30","38"],
    Wieger: ["1","2","3","7","10","13","14","22","23","27"],
    Anita: ["6","13","15","17","21","26","32","33","43","45"],
    Thea: ["1","3","5","7","10","17","19","20","22","38"],
    Danny: ["3","7","11","15","22","28","32","37","40","43"],
    Cindy: ["2","4","16","18","21","24","33","38","41","44"],
    Hanneke: ["1","3","4","12","18","21","25","30","36","40"],
    Willem: ["3","9","17","21","27","33","35","39","41","42"]
},

draws = [
    {
    when: 'Datum: Zaterdag 08-08-2009',
          picks:[2, 13, 15, 18, 21, 41]
    },

    {
    when: 'Datum: Zaterdag 15-08-2009',
      picks:[6, 19, 24, 25, 35, 37]
    },

    {
    when: 'Datum: Zaterdag 22-08-2009',
      picks:[8, 17, 23, 26, 37, 42]
    }
];

var buildPlayers = function(){
    var cont = $("#players"), table = $('<table></table>');
    for( player in players ){
    if ( players.hasOwnProperty( player ) ) {
        var tr = $('<tr><th>' + player + '</th></tr>').appendTo(table),
            len = players[player].length;

        for ( var i = 0; i < len; i++) {
            var td = $('<td/>').text( players[player][i] )
            .appendTo ( tr );
        }

        cont.append( table );
    }
    }
};

var buildDraws = function(){
    var cont = $("#draws");
    for(var i = 0; i < draws.length; i++){
    var html = ["<div class='draw'>","<h4 class='drawNum'>Trekking "+(i+1)+"</h3>","<div class='date'>"+draws[i].when+"</div>","<ol class='picks'>"];

    for(var j = 0; j < draws[i].picks.length; j++) {
        var img = '<img src="http://www.lotto.nl/static/images/ballen/lotto/l'
        + draws[i].picks[j]
        + '.jpg" alt="'
        + draws[i].picks[j]
        + '" />';
        html.push("<li>"+img+"</li>");
        showWin(draws[i].picks[j]);
    }



    html.push("</ol>","</div>");
    cont.append(html.join(""));
    }
};

var showWin = function(winNum){
    $(".pick_"+winNum).removeClass("loss").addClass("win");
};

$(function(){
    buildPlayers();
    buildDraws();
    });

})();
</script>



</body>

</html>
原文

Someone made a nice code for me, but after some changes to have the output lined out in a table, the array picks font doesn't change anymore which are controlled by the following CSS.

.win { color: lime; font-weight: bold }

.loss { color: red; font-weight: bold }

Can somebody help me edit the code so the array picks are lime and red again when there is a win or not?

<html>

<head>

<title>Lotto van Terwijn</title>
<META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW" />

<style type="text/css">


body {

        font-family: Verdana, Arial, Helvetica, sans-serif;

        color: #006699;

        background-color: #FFFFF;

      }

      .name {
        float: left;
        width: 100px;

        color: #006699;

        font-weight: bold;

        margin-right: 0.50em;

      }

      .picks, .picks * {

        display: inline;

        margin: 0;

        padding: 0;

        list-style-type: none;

      }

      .picks * {

        margin: auto 0.50em;
        color: Yellow;

      }

      .win { color: lime; font-weight: bold }

      .loss { color: red; font-weight: bold }

      .drawNum, #Draws H3 {

          margin-bottom: 0;

      }


ul 
{
        list-style-type: none;
        padding-left: 0px;

}

th
{
text-align:left;
padding-right:30px;
padding-top:5px;
padding-bottom:5px;
} 

tr
{
text-align:left;
padding-right:30px;
padding-top:12px;

} 

</style>

<body>

<p><img src="../lotto/images/terwijn.png" width="547" height="188"></p>


<script type="text/javascript" src="../lotto/lotto.js"></script>

<div id="players"></div>
<div id="draws"></div>

<script type="text/javascript">

(function() {

 var players = {
    Joop   : ["6","8","16","18","26","28","32","36","38","41"],
    Marijke: ["7","10","14","18","24","29","30","34","39","40"],
    Michel : ["4","5","11","16","21","27","33","36","42","44"],
    Mario  : ["6","9","18","25","32","35","39","40","43","45"],
    Diana  : ["2","6","8","17","22","23","33","36","42","45"],
    Agnes  : ["3","5","10","15","26","29","32","37","41","44"],
    Chris  : ["5","7","8","9","11","12","16","28","30","32"],
    Jeannette: ["1","2","4","7","8","11","13","28","30","38"],
    Wieger: ["1","2","3","7","10","13","14","22","23","27"],
    Anita: ["6","13","15","17","21","26","32","33","43","45"],
    Thea: ["1","3","5","7","10","17","19","20","22","38"],
    Danny: ["3","7","11","15","22","28","32","37","40","43"],
    Cindy: ["2","4","16","18","21","24","33","38","41","44"],
    Hanneke: ["1","3","4","12","18","21","25","30","36","40"],
    Willem: ["3","9","17","21","27","33","35","39","41","42"]
},

draws = [
    {
    when: 'Datum: Zaterdag 08-08-2009',
          picks:[2, 13, 15, 18, 21, 41]
    },

    {
    when: 'Datum: Zaterdag 15-08-2009',
      picks:[6, 19, 24, 25, 35, 37]
    },

    {
    when: 'Datum: Zaterdag 22-08-2009',
      picks:[8, 17, 23, 26, 37, 42]
    }
];

var buildPlayers = function(){
    var cont = $("#players"), table = $('<table></table>');
    for( player in players ){
    if ( players.hasOwnProperty( player ) ) {
        var tr = $('<tr><th>' + player + '</th></tr>').appendTo(table),
            len = players[player].length;

        for ( var i = 0; i < len; i++) {
            var td = $('<td/>').text( players[player][i] )
            .appendTo ( tr );
        }

        cont.append( table );
    }
    }
};

var buildDraws = function(){
    var cont = $("#draws");
    for(var i = 0; i < draws.length; i++){
    var html = ["<div class='draw'>","<h4 class='drawNum'>Trekking "+(i+1)+"</h3>","<div class='date'>"+draws[i].when+"</div>","<ol class='picks'>"];

    for(var j = 0; j < draws[i].picks.length; j++) {
        var img = '<img src="http://www.lotto.nl/static/images/ballen/lotto/l'
        + draws[i].picks[j]
        + '.jpg" alt="'
        + draws[i].picks[j]
        + '" />';
        html.push("<li>"+img+"</li>");
        showWin(draws[i].picks[j]);
    }



    html.push("</ol>","</div>");
    cont.append(html.join(""));
    }
};

var showWin = function(winNum){
    $(".pick_"+winNum).removeClass("loss").addClass("win");
};

$(function(){
    buildPlayers();
    buildDraws();
    });

})();
</script>



</body>

</html>

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（3）

云柯 2024-08-09 21:00:28

当您更改表格布局时，您成功地丢失了被选择来根据需要添加“获胜”或“失败”类别的类别。相关代码是：

var showWin = function(winNum){
    $(".pick_"+winNum).removeClass("loss").addClass("win");
};

它找不到类为“pick_[some number]”的元素，那么它无法添加获胜或失败类，并且您不会获得颜色。

为了解决您的问题，在您的 BuildPlayers 函数中，您需要类似以下内容的内容：

var td = $('<td/>').text(players[player][i]);
td.addClass("pick_" + players[player][i]);
td.appendTo(tr);

可以将其组合成一行，但我认为这样可能更容易看到。中间线（“addClass”）是您所缺少的。

When you changed to your table layout you managed to lose the class that's being selected to add the "win" or "loss" classes as needed. The pertinent code is:

var showWin = function(winNum){
    $(".pick_"+winNum).removeClass("loss").addClass("win");
};

It can't find an element with the class "pick_[some number]" then it can't add the win or loss classes and you don't get your colors.

To solve your problem, inside your BuildPlayers function, you need something like the following:

var td = $('<td/>').text(players[player][i]);
td.addClass("pick_" + players[player][i]);
td.appendTo(tr);

That could be combined into one line, but I thought it might be easier to see like this. The middle line ("addClass") is what you're missing.

回复 原文
无法回应 2024-08-09 21:00:28

加布里埃尔是对的。在 buildPlayers 函数中创建 td 时，您需要添加 pick_# 类。

将其放入 for 循环中：

var td = $('<td/>') 
    .addClass("pick_" + players[player][i]) // add the class to the td
    .text( players[player][i] )
    .appendTo ( tr );

应该可以解决问题。

Gabriel is correct. Where you are creating the td in the buildPlayers function you need to add the pick_# class.

Put this inside the for loop:

var td = $('<td/>') 
    .addClass("pick_" + players[player][i]) // add the class to the td
    .text( players[player][i] )
    .appendTo ( tr );

Should fix the problem.

回复 原文
缪败 2024-08-09 21:00:28

更改

for ( var i = 0; i < len; i++) {
        var td = $('<td/>').text( players[player][i] )
        .appendTo ( tr );
    }

为：

for ( var i = 0; i < len; i++) {
        $(tr).append( "<td><span class='pick_" + players[player][i] +"'>" + players[player][i] + "</span></td>");
    }

您忘记将正确的类别添加到数字中。

Change

for ( var i = 0; i < len; i++) {
        var td = $('<td/>').text( players[player][i] )
        .appendTo ( tr );
    }

To:

for ( var i = 0; i < len; i++) {
        $(tr).append( "<td><span class='pick_" + players[player][i] +"'>" + players[player][i] + "</span></td>");
    }

You forgot to add the right class to the numbers.

回复 原文
~没有更多了~

关于作者

ぃ双果

暂无简介

0 文章
0 评论
23 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

qq_E2Iff7

文章 0 评论 0

Archangel

文章 0 评论 0

freedog

文章 0 评论 0

Hunk

文章 0 评论 0

18819270189

文章 0 评论 0

wenkai

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文