dynamically fadeIn html based upon values

I'm using jquery to dynamically fadeIn content based upon the winners of a basketball series. So, for example, lets take the NBA eastern conference finals. It's a best of seven series. First team to win four games wins the series. So, if for the first input tag, the user selects the Chicago Bulls as their winner. For the second game, the user selects the Miami Heat as their winner. Based upon those results so far, jquery will have to fadeIn an additional input tag because obviously the series is going to at least 5 games.

That much is very basic. But, would anyone have some food for thought as to how to go about doing this so that if the client was to go back and edit the the winners of the games, it would fade them in and out accordingly. I can do this using lots of conditional statements, but I'd really love to get some food for thought as it relates to a more efficient approach.

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

---

You've got a form. The form has at least n elements (in this case, n = 4). Each element is presumably a select/radio where the user can pick from either team.

<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. Attach a semantic class to each of the selects, like "prediction"

2. Add an event handler to their onchange method

   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. Write an event handler that calculates the wins for each team based on user selection and compares it against the max.

4. Go through each fieldset and fade it in/create it based on how many are left

You can write a bestOf(x) method to figure out how many number of wins are necessary (for NBA playoffs it's 7, but calculating this will make your code portable and extensible.

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

• These may not be entirely right, but I think it's close. Play out the permutations. Update the Q with the proper formulas once you figure them out