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

Posted 2023-04-18

【中文标题】为创建的 div 分配唯一 ID，然后使用 jquery 引用

【英文标题】：Assign unique ID to div as created and then reference with jquery

【发布时间】：2013-06-03 01:25:35

【问题描述】：

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

我在课程中尝试过这个，当然，当点击任何查看作业时，所有的职位描述都会显示出来。

我尝试了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-postborder-bottom: 1px solid red; padding: 0; margin: 10px 0;
        h3, ppadding: 0; margin:0;
        .view-jobcursor: 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-->

【问题讨论】：

尝试使用 jQuery .next() 选择器在单击的元素旁边显示 DIV。您还可以使用 ` ^= `（以开头）选择器过滤 jQuery 选择器，以便仅触发 ID 以 ___ 开头的 <h3> 元素。请参阅下面的详细（工作）答案。

【参考方案1】：

分配classNames 而不是id's

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

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

【参考方案2】：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<style type="text/css">
.job-detailsdisplay:none; 
.job-postborder-bottom: 1px solid red; padding: 0; margin: 10px 0;
h3, ppadding: 0; margin:0;
.view-jobcursor: pointer;
</style>
<script type="text/javascript">
$(document).ready(function() 
     // Please hide this class on CSS
     // $("div.job-details").css("display" , "none");
     $("h3.view-job").click(function() 
        // you ned to use this keyword
        // it is very important when you use javascript or jquery
        // this keyword only pick element on which you click
        $(this).parent().find(".job-details").show();
    );

);
   </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 
     // First of all Please use echo instead of Print
     echo ""; 
     while($info = mysql_fetch_array( $data )) 
      
         echo "<div class='job-post'>"; 
         echo "<h3>Position / Location:</h3> <p>".$info['jobtitle'] . ", ".$info['joblocation'] . "</p>";
         // you can't use id multiple time in a same page so instead of id use Class
         // if you want to use id then you have to generate uniq id
         // check below I generate id --> I don't know your database field that's why I used jobId
         echo "<h3 class='view-job' id='job".$info['jobId']."'>View Job:</h3> <div class='job-details'>".$info['jobdesc'] . " </div>"; 
         echo "</div>";
       
     ?>
    </div><!--//END job-container-->

【参考方案3】：

这应该做你想要的（测试没问题）。只需替换您的 mysql 登录信息，该示例应该可以工作。

我完成了你的工作细节 div（它缺少来自 php 的数据），但你真正要找的是 jQuery 代码。

当一个<h3>标签其id以字符view-job开始被点击时，jQuery点击事件处理程序将：

重新隐藏所有id以字符job-details开头的div

在 DOM 树中显示下一个 div

---

代码：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<style type="text/css">
    .job-postborder-bottom: 1px solid red; padding: 0; margin: 10px 0;
    h3, ppadding: 0; margin:0;
    .view-jobcursor: pointer;
</style>
<script type="text/javascript">
    $(document).ready(function() 
        $("div[id^='job-details']").css("display" , "none");

        $('h3[id^="view-job"]').click(function() 
            $("div[id^='job-details']").hide(500);
            $(this).next('div').show(500);
        );

    );
 </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()); 

        $data = mysql_query("SELECT * FROM openjobs") or die(mysql_error());
  ?>

<div id="job-container"> 

<?php 
    echo "<br>"; 
    while($info = mysql_fetch_assoc( $data ))  
        echo "<div class='job-post'>"; 
        echo "<h3>Position / Location:</h3> <p>".$info['jobtitle'] . ", ".$info['joblocation'] . "</p>";
        echo "<h3>View Job:</h3> <div id='job-details'>".$info['jobdetails']."</div>"; 
        echo "</div>";
    
 ?>

 </div><!--//END job-container-->