php - 创建时为 div 分配唯一 ID，然后使用 jquery 引用

Question

我是 php 的新手，也是 jQuery 的初学者。我有一个 php 页面，其中填充了 mySQL 表中的数据。我想要实现的是为包含“查看职位”的 h3 分配一个唯一的 id，以及打印职位描述的 div。然后，我想使用 jQuery 引用这些内容，这样如果有人单击“查看作业”，则只会显示该作业的描述。我希望这是有道理的。

我在类(class)中尝试过此操作，当然，当单击任何“查看职位”时，所有职位描述都会显示出来。

我尝试了 solution here ，但这最终在我的页面上出现了 36 个“查看作业”链接，并且我需要在创建 h3 和 div 时将唯一 ID 分配给它们。

我愿意接受有关另一种方式的建议，以实现我正在寻找的目标 - 基本上是在用户单击每个职位的“查看职位”时隐藏/折叠每个描述。

这是我的代码:

        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
        <style type="text/css">
        .job-post{border-bottom: 1px solid red; padding: 0; margin: 10px 0;}
        h3, p{padding: 0; margin:0;}
        .view-job{cursor: pointer;}
        </style>
        <script type="text/javascript">
                        $(document).ready(function() {
                            $("div#job-details").css("display" , "none");
                             $("h3#view-job").click(function() {
                                $("div#job-details").css("display" , "block");
                            });

                        });
         </script> 
        <?php 
         // Connects to your Database 
         mysql_connect("xx", "xx", "xx") or die(mysql_error()); 
         mysql_select_db("lcwebsignups") or die(mysql_error()); 
         $data = mysql_query("SELECT * FROM openjobs") 
         or die(mysql_error()); 
          ?>
         <div id="job-container"> 
          <?php 
         Print ""; 
         while($info = mysql_fetch_array( $data )) 
         { 
         Print "<div class='job-post'>"; 
         Print "<h3>Position / Location:</h3> <p>".$info['jobtitle'] . ", ".$info['joblocation'] . "</p>";
         Print "<h3 id='view-job'>View Job:</h3> <div id='job-details'>".$info['jobdesc'] . " </div>"; 
         Print "</div>";
         }  
         ?>
        </div><!--//END job-container-->

Answer 1

分配classNames而不是id

然后使用this上下文选择您的div，它将仅搜索上下文中的一个，而不是所有div

$("h3.view-job").on('click',function() {
    $(this).next("div.job-details").css("display" , "block");
});