基于值动态淡入 html

Question

我正在使用 jquery 根据篮球系列赛的获胜者动态淡入内容。因此，例如，让我们以 NBA 东部决赛为例。这是七个系列中最好的一个。首先赢得四场比赛的球队赢得系列赛。因此，如果对于第一个输入标签，用户选择芝加哥公牛队作为他们的赢家。对于第二场比赛，用户选择迈阿密热火队作为他们的获胜者。根据目前的这些结果，jquery 将不得不在一个额外的输入标签中淡入淡出，因为显然该系列至少要进行 5 场比赛。

这是非常基本的。但是，是否有人对如何进行此操作有一些思考，以便如果客户要返回并编辑游戏的获胜者，它会相应地淡入淡出。我可以使用很多条件语句来做到这一点，但我真的很想得到一些思考，因为它与更有效的方法有关。

<script type="text/javascript">
$(document).ready(function(){
    var data = <?php echo $teamone_ac; ?>;
    var soulja = <?php echo $teamtwo_ac; ?>;

    var away_team_other = $('.away_team_other').html();
    var home_team_other = $('.home_team_other').html();

    var away_team_wild = $('.away_team_wild').html();
    var home_team_wild = $('.home_team_wild').html();

    $("#game_one_other").autocomplete({ source: data });
    $("#game_two_other").autocomplete({ 
        source: data,
        select: function(event, ui) 
        { 
            var game_one_other = $('#game_one_other').val();
            var game_two_other = ui.item.value;
            var game_three_other = $('#game_two_other').val();

            var arr = [game_one_other, game_two_other, game_three_other,       game_four_other, game_five_other];

            var away = away_team_other;
            var home = away_home_other;

            var numAway = $.grep(arr, function (elem) {
                return elem === away;
            }).length;

            var numHome = $.grep(arr, function (elem) {
                return elem === home;
            }).length;

            if(game_one_other != game_two_other)
            {
                $('#one_four').fadeIn('slow');
            }
        }   
    });
    $("#game_three_other").autocomplete({ 
        source: data,
        select: function(event, ui) 
        { 
            var game_one_other = $('#game_one_other').val();
            var game_two_other = $('#game_two_other').val();
            var game_three_other = ui.item.value;

            if(game_two_other == game_three_other && game_two_other != game_one_other)
            {
                $('#one_four').fadeIn('slow');
            }
        }   
    });

    $("#game_one_wild").autocomplete({ source: soulja });
    $("#game_two_wild").autocomplete({ source: soulja });
    $("#game_three_wild").autocomplete({ source: soulja });

    $('#one_four').hide();
    $('#one_five').hide();

    $('#two_four').hide();
    $('#two_five').hide();
});

Answer 1

你有一个表格。该表单至少有 n 个元素（在本例中，n = 4）。每个元素大概是一个选择/收音机，用户可以从任一团队中选择。

<form id="predictWinners" action="submitPredict" method="POST">
     <fieldset id="first">
        <legend>Game 1</legend>
        <input class="prediction" type="radio" name="winner" value="[team 1 here]" /> [team 1 here]
        <br />
        <input class="prediction" type="radio" name="winner" value="[team 2 here]" checked="checked" /> [team 2 here]
        <br />
     </fieldset>
     <!-- repeat for first 4 -->
    <input type="submit" value="Submit" />
</form>

1. 为每个选择附加一个语义类，例如“预测”

2. 将事件处理程序添加到他们的onchange 方法

   jQuery(document).ready(function(){
     jQuery(".prediction").change(function() { 
           gamesNec = findGamesNecessary();
           if(gamesNec > 4)
           {
              jQuery("fieldset").each(function(index){ 
                 if(index > 4 && index <=gamesNec) { jQuery(this).fadeIn()  } 
              });
           }
      });
    })
   

3. 编写一个事件处理程序，根据用户选择计算每个团队的胜利，并将其与最大值进行比较。

4. Go through each fieldset 并根据剩余数量淡入/创建它

您可以编写一个 bestOf(x) 方法来计算需要多少次胜利（对于 NBA 季后赛，它是 7，但计算这将使您的代码具有可移植性和可扩展性。

bestOf = function(x) {
   return (x % 2 == 0) ? (x / 2) : ((x/2)+0.5)  
}

findGamesNecessary = function() {
   seriesLength = 7
   team1_wins = 0
   team2_wins = 0
   //iterate through each user selection and update the wins. Left as an exercise
   gamesPlayed = team1_wins + team2_wins 
   gamesNecessary = (team1_wins >1 && team2_wins > 1) ? bestOf(seriesLength-gamesPlayed) +  gamesPlayed : bestOf(seriesLength)
   return gamesNecessary;
}

• 这些可能并不完全正确，但我认为它很接近。播放排列。找出正确的公式后，用正确的公式更新 Q