javascript - 如何在自动添加的div处添加不同的数字？

Question

我正在一个告白网站上工作，在该网站上我有一个“本周热门”部分，其中显示了本周最受欢迎的 3 个告白，它按照最喜欢的顺序将它们显示在水平 slider 中，因此它是最受欢迎的喜欢，第二喜欢，第三喜欢的告白。我想做的事情是在每个 div 上放置 #1、#2、#3 数字，但我无法实现这一点，因为我只设置一个 div 的样式，网站会自动创建另外两个 div 并为其添加说明。

这是我用来显示它们的 php + html 代码:

<div class="sidebox">

<?php
$select = "SELECT confessions.confessId,
                                (IFNULL(confessions.firstName, '')) AS firstName,
                                confessions.confessText,
                                DATE_FORMAT(confessions.postDate,'%b %d %Y %h:%i %p') AS postDate,
                                hasImage,
                                UNIX_TIMESTAMP(confessions.postDate) AS orderDate,
                                confessions.isActive,
                                (SELECT COUNT(*) FROM views WHERE views.confessId = confessions.confessId ) as totalViews,
                                (SELECT COUNT(*) FROM likes WHERE likes.confessId = confessions.confessId ) as totalLikes,
                                (SELECT COUNT(*) FROM dislikes WHERE dislikes.confessId = confessions.confessId ) as totalDislikes
                            FROM
                                confessions
                            WHERE isActive = 1
                            ORDER BY totalViews DESC , orderDate DESC limit 3";
                $resss = mysqli_query($mysqli, $select) or die('-3' . mysqli_error());  ?>

            <div id="sticky-nav" style="height:36px;" class="absolute" style="z-index:0">
        <div id="width-limit">
            <div class="options">
                <ul class="menu">
                            <li><a class="carousel_prev previous" href="#"><b style="font-size: 20px;">&#8249;</b></a></li>
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<li><a style="opacity:1;padding-top:1px;position:relative;left:-54px;"><i class="fas fa-crown" id="crownicon"></i> Top of the Week</a>&nbsp;</li> 
                            <li><div class="menu-clear"></div></li> 
                            <li><a class="carousel_next next" href="#"><b style="font-size: 20px;">&#8250;</b></a></li>         
                        </ul>
            </div>
            <div class="options" id="opt2" style="float:right; width:280px;display:none;">
                <ul style="display: inline-block;float:right;">

                </ul>
            </div><div class="options" id="opt2" style="float:right; width:280px;display:none;">
                <ul style="display: inline-block;float:right;"> 
                </ul>
            </div>

            <div id="small-logo"></div>
            <div class="clearfix"></div>
        </div>
        </div><div class="sidecontainer">
<div class="slick">
<?php
                        while ($row = mysqli_fetch_assoc($resss)) {
                            // Get Total Comments
                            $comssql = "SELECT 'X' FROM comments WHERE confessId = ".$row['confessId']." AND isActive = 1";
                            $commentstotal = mysqli_query($mysqli, $comssql) or die('-4'.mysqli_error());
                            $totComments = mysqli_num_rows($commentstotal);
                            if ($totComments == '1') { $comText = 'Comment'; } else { $comText = 'Comments'; }
                            if ($row['totalViews'] == '1') { $viewText = 'View'; } else { $viewText = 'Views'; }
                            $shareURL = $set['installUrl'].'page.php?page=view&confession='.$row['confessId'];
                    ?>
                            <div class="confession" style="margin-left: 0;width: 300px;">
                                <div class="left"><span class="label2 label-confess1"><?php echo $row['totalViews'].' '.$viewText; ?></span></div>
                              <div class="right"><span class="bestthisweek">

                              <?php if ($row['totalLikes'] == '12') { echo "Top of the Day!"; } else { echo "Top!"; } ?>

                              </span></div>
                                <div class="confessionstyle" style="margin-top:20px;"><p> 
                                    <font color="#fff3b2">
                                    <?php
                                        if ($filterProfanity == '1') {
                                            echo nl2br(htmlspecialchars(filterwords($row['confessText'])));
                                        } else {
                                            echo nl2br(htmlspecialchars($row['confessText']));
                                        }
                                    ?>
                                    </font>
                                    </p></div>
                                <input type="hidden" id="confessId" name="confessId_<?php echo $count; ?>" value="<?php echo $row['confessId']; ?>" />
                                <?php
                                    $chkLikes = mysqli_query($mysqli,"SELECT 'X' FROM likes WHERE confessId = ".$row['confessId']." AND likeIp = '".$_SERVER['REMOTE_ADDR']."' LIMIT 1");
                                    $hasLike = mysqli_num_rows($chkLikes);

                                    $likeCSS = $hasLike > 0 ? 'text-info' : 'white';

                                    $chkDislikes = mysqli_query($mysqli,"SELECT 'X' FROM dislikes WHERE confessId = ".$row['confessId']." AND dislikeIp = '".$_SERVER['REMOTE_ADDR']."' LIMIT 1");
                                    $hasDislike = mysqli_num_rows($chkDislikes);

                                    $dislikeCSS = $hasDislike > 0 ? 'text-danger' : 'white';
                                ?>
                                <div class="confession-actions">                                    
                                    <div class="likes" style="width: 75px;">
                                        <span class="label2 label-confess first liked">                                         
                                            <a href="" id="likeIt_<?php echo $row['confessId']; ?>" class="likeIt_<?php echo $count; ?> <?php echo $likeCSS; ?>" style="text-decoration:none;outline:none;">
                                                <i class="fas fa-thumbs-up"></i> <span style="color:white;" id="likesVal_<?php echo $row['confessId']; ?>"><?php echo $row['totalLikes']; ?></span>
                                            </a>
                                        </span>
                                        </div>
                                    <div class="dislikes" style="width: 75px;">
                                        <span class="label2 label-confess disliked">
                                            <a href="" id="dislikeIt_<?php echo $row['confessId']; ?>" class="dislike_<?php echo $count; ?> <?php echo $dislikeCSS; ?>" style="text-decoration:none;outline:none;">
                                                <span style="color:white;" id="dislikesVal_<?php echo $row['confessId']; ?>"><?php echo $row['totalDislikes']; ?></span> <i class="fas fa-thumbs-down"></i>
                                            </a>
                                        </span>
                                    </div>

                                    <?php if ($row['hasImage'] != '0') { ?>
                                        <span class="label label-confess"><i class="fa fa-picture-o img"></i></span>
                                    <?php } ?>

                                    <div class="comments">

                                        <div class="divide" style="width: 75px;"><div id="comments-hvr"><a href="page.php?page=view&confession=<?php echo $row['confessId']; ?>">
                                            <i class="fa fa-comments"></i> <?php echo $totComments.' '; ?>
                                            </a></div></div>
                                    </div>

                                <div class="divide2" style="width: 75px;"><div class="fb-share-button" style="top:-6.5px;transform: scale(0.93);" 
    data-href="page.php?page=view&confession=<?php echo $row['confessId']; ?>" 
    data-layout="button_count"></div></div></div>

                                <div class="clearfix"></div>
                            </div>
                    <?php

                        }
                    ?>
               </div>

我尝试了所有方法，这是我拥有的最佳解决方案，但我不知道应该在 if、elseif、else 中放入什么，我需要一些将 #1 放在第一，第二次忏悔#2，第三次忏悔#3。所以我需要这样的东西，但不需要我手动插入>喜欢。

<?php if ($row['totalLikes'] > '11') { echo "#1"; } elseif ($row['totalLikes'] > '5') { echo "#2"; } else { echo "#3"; }?>

请访问我的网站，它仍在开发中，但是查看右侧的本周热门，您将了解我真正想要的内容:http://confessions.byethost31.com

最终:

<?php $i = 1; ?>

    <?php

echo '#'.$i;
    $i++;

?>

Answer 1

创建一个随着每次 while 迭代而递增的变量的最简单方法。

$i = 1; // set initial value     
while ($row = mysqli_fetch_assoc($resss)) {
    echo 'This number will grow by 1 for every row - '.$i;
    $i++; // this is equal to $i = $i + 1; so will increment by 1 every time.
}

编辑:

与其尝试假设总喜欢数是多少，不如按总喜欢数对它们进行排序(将最喜欢的放在第一位并分配此#1)会更容易。

按totalLikes DESC、totalViews DESC、orderDate DESC排序

然后你就可以使用

echo '#'.$i;

在您想要显示数字的地方，您可以这样做，因为您有 LIMIT 3，因此只会显示前 3 个。