在使用 php for 循环生成 div 并为它们动态分配 ids 后，我如何使用 jquery 定位 ids？

Posted 2023-05-08

【中文标题】在使用 php for 循环生成 div 并为它们动态分配 ids 后，我如何使用 jquery 定位 ids？

【英文标题】：After generating divs using php for loop and also dynamically assigning for them ids how to i target the ids using jquery?

【发布时间】：2021-05-04 10:52:25

【问题描述】：

我正在使用 while 循环来输出各种元素，每个元素都包含 mysql 数据库中的行。我能够使每个 div 具有不同的 id，但是，我不知道如何通过 id 使用 jquery 来定位每个 div，以便每个 div 都是可点击的链接。 这是我的代码的一部分

 <!-- php script -->
 <?php
   require_once 'controllers/fetchVids.php';

   if (mysqli_num_rows($result) > 0) 
       // output data of each row
       while($row = mysqli_fetch_assoc($result)) 
           $fileName = $row[$filePath];
           $file = basename($fileName);
           $mb = round($row[$size] / (1000000), 2);

           echo "
                <div class='container search-output' id=''>
                    <div class='row song-info' id='file-$row[$videoId]'>
                        <div class= 'col col-sm-6 artist'>
                            $file
                        </div>
                    <div class= 'col col-sm-3 song-title'>
                        <span>Size:</span>
                        $mb mb
                    </div>
                    <div class= 'col col-sm-3 song-title'>
                       <span>Downloads:</span>
                       $row[$downloads]
                    </div>
             </div>

                <div class='row-lower'>
                   <a href='#' class='icon all-links'>
                       <i class='fa fa-whatsapp'></i> Share
                   </a>
                       <i class='fa fa-clock duration'></i> Duration $row[$duration] mins
               </div>
                               
              </div> 
             ";
        else 
            echo "No New Videos";
            

        mysqli_close($connection);
       ?>

请告诉我正确的 jquery 来执行上述操作。谢谢 下面是我尝试过的 jquery 代码，但它会打开所有 div，而不仅仅是用户点击

$(document).on('click', '.song-info', function() 
  // alert(this.id);
  if (this.id) 
    window.location = "./song-details.php";
  
);

【问题讨论】：

var el = $("#divid");基本上，jQuery 选择器遵循 css 选择器语法。

到目前为止你尝试过的......请提供你的js代码

发布您尝试的 jQuery 代码。 SO 不是编码服务。

【参考方案1】：

我认为你使用 'this' 关键字出错了——你可能想改用 $(this)，这是 jQuery 中的一个关键字，它使你当前正在处理的 DOM 节点可以访问 jQuery 方法（至少据我所知！）

您可以使用 $(this).attr('attribute name')（另一种 jQuery 方法）来获取您单击的 div 的 'id' 属性并在您的函数中使用它。

如 cmets 中所述，有多种方法可以做到这一点，但这里是我的做法。我假设您想将查询字符串中的 fileId 发送到“./song-details.php”。

  $(document).on('click', '.song-info', function() 
    let id = $(this).attr('id').split('-').pop()
      if (id) 
        window.location = "./song-details.php" + "?id=" + id
      
  ) 

【讨论】：

感谢代码能够挑选出 id 并将其显示在 url 中，但是它仍然会打开使用 while 循环生成的所有可用 div。有没有办法我可以修改这个jquery代码，只打开用户点击的那个id的div>

“打开”是什么意思？

谢谢。我的错误来自我能够修复的其他地方。您的代码运行良好