javascript - 仅操作 foreach 循环的第一行并同时操作所有行

Question

我正在尝试添加一个仅对管理员可见的删除按钮。但同时，第一行将为用户提供一个“我已阅读此信息”按钮。在此代码中，无法隐藏所有行的删除按钮。仅第一行的删除按钮被隐藏。如果用户不是管理员，我希望删除按钮不会出现在任何地方。

我已经尝试过这个 JavaScript 代码，但它只影响 foreach 循环的第一行。我不知道该怎么做。你有什么想法吗？

 <?php     if(($_SESSION['username'] == 'Admin')) { 

    echo "<script>  $('#del_photo').hide(); </script> ";
    }




                foreach($select as $index => $rs) {


    ?>    

                <div class="post-id"   id="<?php echo $rs['id']; ?>" style="margin 300px; overflow: hidden; border-top-right-radius: 25px; border-top-left-radius: 25px;   display:block;
                position: relative; margin: 20px; border: 2px solid #222;">
                <br><br>
                <h2 class="blog-post-title"><?php echo $rs['title'];?></h2>
                <p class="blog-post-meta"> <?php echo $rs['date'];?> skrevs av <a href="#"> <?php echo $rs['author'];?></a></p>

                        <?php 
                            $i = 0;
                            $len = count($select);
                            foreach ($select as $item) {
                            if ($i == 0) {
                            echo  "<form action=\"#\" style=\" height:30px; background:transparent; border:none; color:transparent;\" method=\"get\"> <button name=\"readit\" id=\"readit\" 
                            style=\" height:30px; position:absolute; background:transparent; border:none; color:transparent; width:70px;  display: flex; top:-0.5%; left:0%; float:right; margin:5px 5px 0 0;\"  
                            class=\"del_photo\"> <span src=\"sett.png\" class=\"readit\" id=\"readit\" ></span><img src=\"sett.png\"  class=\"readit\"  border=\"0\" /></button> </form>";
                            } else if ($i == $len - 1) {
                            echo "// last";
                            }

                            $i++;
                            }   
                        ?>

                <br>
                <center><p style="margin-left:auto; margin-right: auto; display:block; height: 100%; max-width: 100%;  margin-bottom:0px;"><?php echo $rs['content'];?></p></center></br>
                <img style=" margin-left:auto; margin-right: auto; display:block; height: 100%; max-width: 100%;  margin-bottom:0px;" src='<?php echo $rs['image'];?>' width="400" height="300">            
                <button  id="del_photo" style=" background:transparent; border:none; width:350px; height: 250px; color:transparent;  display: inline-block; 
                float:right; margin:5px 5px 0 0; position: absolute; top: 0; right: 0;"  
                class="del_photo" onclick="deletepost('<?php echo $rs['id']; ?>')"> <span class="del_photo" id="del_photo" src="x.png"  style="  display: inline-block; 
                float:right; margin:5px 5px 0 0; position: absolute; top: 0; right: 0;" 
                id="" ></span><img  class="del_photo" id="del_photo" src="x.png"   style="  display: inline-block;  
                float:right; margin:5px 5px 0 0; position: absolute; top: 0; right: 0;"  class="del_photo"  border="0" /></button>
              </div>




    <?php
        }
    ?>

Answer 1

问题是你告诉jquery隐藏带有 id="del_photo" 的按钮

但是 id 意味着是唯一的，因此在这种情况下不起作用，并且仅隐藏第一个， 所以你最好使用类 del_photo

所以尝试一下

echo "<script> $('.del_photo').hide(); </script> ";