динамически исчезать HTML на основе значений - PullRequest
Новая
       1

динамически исчезать HTML на основе значений

1 голос
/ 15 мая 2011

Я использую jquery для динамического затухания контента, основанного на победителях баскетбольной серии. Так, например, давайте возьмем финал восточной конференции НБА. Это лучшее из семи серий. Первая команда, выигравшая четыре игры, выигрывает серию. Так, если для первого входного тега пользователь выбирает Chicago Bulls в качестве своего победителя. Для второй игры пользователь выбирает Miami Heat в качестве своего победителя. Исходя из этих результатов, 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();
});

1 Ответ

0 голосов
/ 15 мая 2011

У вас есть форма. Форма имеет не менее 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. Пройдите через каждый набор полей и затемните его / создайте, основываясь на том, сколько осталось

Вы можете написать метод 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 правильными формулами, как только вы их выясните
...