JavaScript—在向上或向下单击时更改内容的函数

我试图创建一个函数，当你点击向上时，它会将你想要的内容附加到div中，如果你再次按下向上键，它会再次显示你想要的内容并替换其他数据，当你按下向下键时也是如此

这个想法是有5个选项，它开始的选项取决于用户的信息。假设它们是数字3，它将从数字3开始，如果你按向上键，它将转到数字2，如果你按向下键，它将转到数字4，并用这些数字显示数据

我想弄清楚的是，我怎样才能做这个选项，然后当点击时，做我想做的事情

关于它看起来像什么的想法：

当你按下蓝色向上键时，它会上升一页，只显示钻石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>

三,
钻石5
钻石五
李善的救赎者
等级
召唤者
标志
获胜
损失
获胜率
要点
您需要查看数据所在的结构，并在脚本的早期确定哪个位是“当前重要”的入口点，这可能是包含您的联盟的数组的索引器

例如，您可以通过url传递一个参数，然后在脚本开头拾取该参数，或者初始化到某个预定义点（第一个联赛可能为0）

然后，在呈现按钮的位置，可以使用该索引加上或减去一来指向当前url

$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()';

$hrefPrevious=$currentLeagueIndex-1>-1//边界检查是否正常
? '我的url？league='。（$currentLeagueIndex-1）；
：'javascript:void（）'；
$hrefNext=（$currentLeagueIndex+1）<计数（$allLeagues）
? '我的url？league='。（$currentLeagueIndex+1）；
：'javascript:void（）'；
如果使用API显示数据，请将API设计为接受“顶部”和“限制”。将结果限制为“5”，并从“3”、“4”、“2”等开始获取结果创建div数组或类似的数组，并让两个按钮增加或减少数组的位置。如果您提供了一些示例代码，那么会更容易帮助您。好的，我会提供我目前的代码，但我不完全了解它的工作原理，因为我从来没有过多使用java脚本，并且尝试为学校项目做些工作。您使用的是php，而不是javascript。这同样适用于javascript。是的，我知道这一点，但我的意思是将每个div附加到正确的页面上，我该怎么做
$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()';