JavaScript - 在向上或向下点击时更改内容的功能

时间:2016-12-22 15:59:13

标签: javascript jquery html

我正在尝试创建一个功能,当您点击它时,它会向div添加您想要的内容,如果再次按下它将再次显示您想要的内容并替换其他数据,当您按下时也是如此。

这个想法是有5个选项,它启动的选项取决于用户信息。所以说它们是3号,它将从3号开始,如果你按下它将转到2号,如果你按下它将转到4号并用这些数字显示数据。

我想弄清楚的是我如何制作这个选项,然后点击时按照我的意愿去做。

它的外观: Here is what it looks like:

当你按下蓝色时会向上移动一页,只显示钻石2中的玩家,其余部分则相同

<main>
    <div class="panel">
        <div class="panel-body"></div>
            <div class="league-banner" style="height: 50px;">
                <div class="league-number" style="top: 15px; position: relative;">
                    <div class="league-rank">
                       III
                    </div>
                    <div class="league-buttons">
                        <a href="" style="top: -42px; position: relative;"><img  src="img/league/up.png"/></a>
                        <a class="sq-btn" href="" style="position: relative; top: -30px;"><img  src="img/league/down.png"/></i></a>
                    </div>
                </div>
                <span style="color:#57a2dd; font-size: 20px;">DIAMOND 5 </span>  
                <span style="font-size: 20px;" class="second-banner">Diamond V</span>
                <div class="light" style="font-size:20px;">Lee Sin's Redeemers</div>
            </div>
            <div class="league-top">
                <div class="stats-header stats-row">
                    <div class="table-cell">Rank</div>
                    <div class="table-cell">Summoner</div>
                    <div class="table-cell">Emblems</div>
                    <div class="table-cell">Wins</div>
                    <div class="table-cell">Losses</div>
                    <div class="table-cell">Win Rate</div>
                    <div class="table-cell">Points</div>
                </div>
                <div class="scroll-league" id="scroll-league">
                <?php
                    if ($league_list){
                        $entrieszlist = $league_list->entries;
                        usort($entrieszlist, function($acl,$bcl){
                            return $bcl->leaguePoints-$acl->leaguePoints;
                        });

                        $index = 0;
                        foreach ($entrieszlist as $datazlistleague){

                        $playerleagueId = $datazlistleague->playerOrTeamId;
                        $playerleagueNameSummoner = $datazlistleague->playerOrTeamName;
                        $playerleagueNameSummonerDivison = $datazlistleague->division;
                        $playerleagueNameSummonerWins = $datazlistleague->wins;
                        $playerleagueNameSummonerLosses = $datazlistleague->losses;
                        $playerleagueNameSummonerLP = $datazlistleague->leaguePoints;

                        $playerleagueNameSummonerGamesPlayed = $playerleagueNameSummonerWins + $playerleagueNameSummonerLosses;
                        $playerleagueNameSummonerGamesWinRate = (100/$playerleagueNameSummonerGamesPlayed)*$playerleagueNameSummonerWins ;

                        $playerleagueNameSummonerLPtarget = $datazlistleague->miniSeries->target;
                        $playerleagueNameSummonerLPWins = $datazlistleague->miniSeries->wins;
                        $playerleagueNameSummonerLPLosses = $datazlistleague->miniSeries->losses;
                        $playerleagueNameSummonerLPProgress = $datazlistleague->miniSeries->progress;

                        if (isset($datazlistleague->miniSeries)){
                            $miniSeriesdatayesnodata = 1;
                        } else {
                            $miniSeriesdatayesnodata = 2;
                        }

                        $summonerData1;
                        if(isset($playerleagueNameSummoner)) {
                            $formatedUserName1 = str_replace(" ", "", $playerleagueNameSummoner);
                            $formatedUserName1 = mb_strtolower($formatedUserName1, 'UTF-8');
                            $sql1 = 'SELECT * FROM players_data WHERE sum_name = "' . $formatedUserName1.'"';
                            $result1 = $conn->query($sql1);

                            if($result1->num_rows > 0) {
                                while ($row1 = $result1->fetch_assoc()) {
                                    $GLOBALS['summonerData1'] = unserialize($row1['summoner_info']);
                                }
                            } else {
                                storeData($conn, $apiKey, $playerleagueNameSummoner, 'players_data');
                                header("Refresh:0; url=leaguesprofile1.php?userName=".$_GET['userName']."");
                            }
                        } else {

                        }
                        $sumiconid1 = $summonerData1->profileIconId;
                        $index++;
                        echo '<div class="stats-data stats-row loser" data-ladder_id="'.$playerleagueId.'" data-ladderdivison_id="'.$playerleagueNameSummonerDivison.'"  data-promos1or2="'.$miniSeriesdatayesnodata.'">
                            <div class="table-cell rank">'.$index.'</div>
                                <div class="table-cell change-selected">
                                    <a href="profile2.php?userName='.$playerleagueNameSummoner .'">
                                        <div style="display: table;">
                                            <div style="display: table-row;">
                                                <div class="table-cell-2">
                                                    <div class="summoner-icon" style="background-image: url(http://ddragon.leagueoflegends.com/cdn/6.24.1/img/profileicon/'.$sumiconid1 .'.png);"></div>
                                                </div>
                                                <div class="table-cell-2">'.$playerleagueNameSummoner .'</div>
                                            </div>
                                        </div>
                                    </a>
                                    </div>

                                    <div class="table-cell">
                                        <div style="display: inline-block;" original-title=""> ';

                                        if($datazlistleague->isHotStreak == true){
                                           echo '<img  src="img/league/Hot_streak.png"/>';
                                        } else if($datazlistleague->isHotStreak == false){
                                           echo '<img  src="img/league/streak_none.png"/>';
                                        }
                                        echo '</div><div style="display: inline-block;" original-title="">';

                                        if($datazlistleague->isFreshBlood == true){
                                            echo '<img src="img/league/Recruit.png"/>';
                                        } else if($datazlistleague->isVeteran == true){
                                            echo '<img src="img/league/Veteran.png"/>';
                                        } else if ($datazlistleague->isFreshBlood == false && $datazlistleague->isVeteran == false){
                                             echo '<img src="img/league/Recruit_none.png"/>';
                                        }

                                        echo '</div>
                                        </div>
                                    <div class="table-cell change-selected">'.$playerleagueNameSummonerWins.'</div>
                                    <div class="table-cell change-selected">'.$playerleagueNameSummonerLosses.'</div>
                                    <div class="table-cell change-selected">'.number_format((float)$playerleagueNameSummonerGamesWinRate, 1, '.', '').'%</div>
                                    <div class="table-cell change-selected">'; 

                                    echo $playerleagueNameSummonerLP.'LP';
                                    echo '</div>

                                </div>';
                            }
                        }
                ?>

            </div>
        </div>
    </div>
</main>

代码 - 它应该做的是取决于我在第一页显示的数据属性是否为“data-ladderdivison_id”时显示是否为V然后在页面V上显示该数据但是使用1的向上和向下按钮 - 5改变。

提前致谢

1 个答案:

答案 0 :(得分:0)

您需要查看数据所在的结构,并在脚本中尽早确定哪个位是“当前重要”入口点,这可能是包含您的联赛的数组的索引器。

你可以这样做,例如通过你在脚本开头提取的url传递一个参数,或初始化到某个预定义点(第一个联盟可能为0)。

// take the ?league=... from the url or set it to 0
$currentLeagueIndex = isset($_GET['league']) ? $_GET['league'] : 0;

然后在你渲染按钮的地方你可以指向当前的网址,该索引加上或减去一个。

$hrefPrevious = $currentLeagueIndex-1 > -1 // bounds check for sanity
              ? 'my-url?league=' . ($currentLeagueIndex-1);
              : 'javascript:void()';

$hrefNext = ($currentLeagueIndex+1) < count($allLeagues)
          ? 'my-url?league=' . ($currentLeagueIndex+1);
          : 'javascript:void()';