自动获取输入ID值并使用ajax传递答案

【问题标题】：Automatically get input ID value and pass using ajax自动获取输入ID值并使用ajax传递
【发布时间】：2016-04-30 06:40:44
【问题描述】：

我有以下代码来获取文件夹的目录，

<?php

$path = 'templates';
$files = scandir($path);

foreach($files as $result) {
     if ($result != "." && $result != ".." && $result != "desktop.ini")
     {
              echo '<img src="img/folder.png" width="40px"><a name="'.$result.'" class = "folderLink" href="#">'.$result.'</a> <input type="hidden" name="'.$result.'" value="'.$result.'"></img><br><div  class="fileListInner"></div>';
     }

}
?>

以上代码返回文件夹名称的动态数量。此代码运行良好，并在成功时显示文件夹列表。这是我的表格，

<form id="t-files">
    <a style="margin-left:160px;" class="list-directories" href="#">Select File Path</a><br><br>
    <div id="fileList"></div>
</form>

现在我想进入每个文件夹并列出子文件夹。为此，我获取每个链接的类名，然后单击甚至调用 ajax 函数。这是代码，

// load directories - inner (settings)

    $(document).on("click",".folderLink",function(e){  
          e.preventDefault();
          $.ajax({
            type: 'post',
            url: 'list-directories-inner.php',
            dataType: 'text',
            data: $('#t-files').serialize(),
            success: function (data) { 
                $('#fileList').html(data);
            }
          });
          exit();
    });

还有list-directories-inner.php文件，

<?php    

foreach ($_POST as $key => $value){
   echo "".$key."<br>";
}
$path = 'templates';
$files = scandir($path);

foreach($files as $result) { 

     if ($result != "." && $result != ".." && $result != "desktop.ini")
     {    
           //   echo '<img src="img/folder.png" width="40px"><a href="#">'.$result.'</a></img><br>';

     }

}
?>

如何传递单击的链接（隐藏输入）名称值而不是传递所有隐藏值？因为在 list-directories-inner.php 文件中，我想获得点击的链接值来设置路径。诸如“模板/帖子价值”之类的东西。我想了好几个小时。请帮忙。

【问题讨论】：

什么是“隐藏输入”？
你可以在我的问题的第一个代码 sn-p 中看到它。通过 php 脚本发送。

标签： php jquery ajax

【解决方案1】：

不确定您谈论的是哪个链接，但我收集了以下内容：

  <img src="img/folder.png" width="40px"><a name="'.$result.'" class = "folderLink" href="#">'.$result.'</a> <input type="hidden" name="'.$result.'" value="'.$result.'"></img><br><div  class="fileListInner"></div>

如果是这样，您可以将 $resultvalue 作为数据属性添加到链接中，这样：

 <img src="img/folder.png" width="40px" /><a name="'.$result.'" class = "folderLink" href="#" data-path="'.$result.'">'.$result.'</a><br><div  class="fileListInner"></div>

注意data-path属性。然后获取点击事件的值。

  $(document).on("click",".folderLink",function(e){  
      e.preventDefault();
      var path = $(this).data('path');
      getInnerDirectoryList(path);
  });

  function getInnerDirectoryList(path){

      $.ajax({
        type: 'post',
        url: 'list-directories-inner.php',
        dataType: 'text',
        data: {path_url: path},
        success: function (data) {...},
        error: function(msg){....}
      });

  }

可能有类似上面的东西？

这是一个简单版本的 jsbin： https://jsbin.com/yajefi/edit?html,js,output

【讨论】：

有 5 个链接（根据文件夹数量具有相同的类）。这是行不通的。我认为这部分 var path = $(this).data('path'); . “路径”是什么意思？
它的 data 属性值 data-path="'.$result.'"so 点击一个链接，然后你会得到 data-path 值并将它分配给 path 变量，然后通过 ajax 发送
但是有 5 个带有 data-path 属性的链接。以及具有同一类的所有链接。所以 $(this).data('path');表示 $('.folderLink').data('path');正确的？我想知道哪个值。另一方面，这将返回 5 个值并返回分配给变量的值。我想得到一个与点击的链接相关的值。
链接的数量是动态的，基于文件夹的数量。我们不能使用 ID
$(this).data('path') 将与当前点击事件/链接相关，因此它将获取被点击的链接，而不是全部。

【解决方案2】：

您应该尝试声明一个函数，该函数接受单击文件夹的输入 id，该文件夹将包含必填字段，而不是在每次单击 .folderLink 类时调用的通用函数。

【讨论】：

在这种情况下，输入是动态生成的。没有固定数量的输入。所以每次我们必须编写函数来跟踪每个输入的点击事件

【解决方案3】：

Simon 的答案应该可行，但这里有一个替代方案。

您可以像这样获取隐藏输入的值（因为它与隐藏输入的名称相同）。

$(document).on("click",".folderLink",function(e){ 
      var folder = $(this).siblings('input:hidden').val(); 
      e.preventDefault();
      $.ajax({
         type: 'post',
         url: 'list-directories-inner.php',
         dataType: 'text',
         data: {folder: folder},
         success: function (data) { 
             $('#fileList').html(data);
         }
      });
});

【讨论】：