javascript - 如何使用Jquery获取点击的div内输入标签的值？

Question

我有一个以下 Ajax 成功函数，当用户加载页面或添加文件夹时，它会在 DOM 中打印文件夹 div。

for(var i in output.dirs){
        //console.log(output.dirs[i]);
        var html = '<div class="col-sm-3 text-center" id="img-folder"><input type="hidden" id="folder-names" name="open-folder" value="'+output.dirs[i].name+'"/>';
            html+='<div class="mid-folder">  <i class="fa fa-folder fa-5x"></i>';
            html+='<h3 class="title-folder">'+output.dirs[i].name.substr(0,15)+".."+'</h3></div>';
            $(".folders").append(html);

我想在单击每个文件夹时添加另一个 Ajax 请求。我想发送正在单击的文件夹的文件夹名称，并通过 Ajax 将其发送到 PHP Controller ，以便我可以检索该文件夹内的图像。为此，我附加了一个带有隐藏属性的输入标记，以将文件夹名称打印为值，这样我就可以轻松地使用 .val() 获取该值。

但是这里的问题是我怎么知道哪个文件夹被点击了以及 <input> 的值是多少？属于该 div 的标签，因为打印的每个 div 都将具有相同的 id“img-folder”。

查看一些替代方案，我发现了这一点:

$("#img-folder").each(function(i){
$(this).on("click",function(){
   // Now how would I select the <input> tag value here, so that I could    pass the value into the controller? 
});
});

我现在要做的是捕获被单击的文件夹的值/文件夹名称，并将该值发送到我的 ajax 函数，如下所示:

// function for showing the images and contents inside the folders. 
  $(function(){
    $(document.body).on('click',"#img-folder",function(e){
     console.log($("#folder-names").val());
      //e.preventDefault();
      $.ajax({
        url:'<?php echo base_url("Welcome/show_image"); ?>',
        type:'POST',
        data:$('#folder-name').val(),
        success:function(data){
          console.log(data);

        },
      });
    })
  })

有什么建议或任何其他逻辑来解决这个问题吗？这会很棒。

Answer 1

您正在复制元素的 ID。 ID 必须是唯一的。你宁愿上同一个类。像这样:

for(var i in output.dirs){
    //console.log(output.dirs[i]);
    var html = '<div class="col-sm-3 text-center" class="img-folder"><input type="hidden" class="folder-names" name="open-folder" value="'+output.dirs[i].name+'"/>';
        html+='<div class="mid-folder">  <i class="fa fa-folder fa-5x"></i>';
        html+='<h3 class="title-folder">'+output.dirs[i].name.substr(0,15)+".."+'</h3></div>';
        $(".folders").append(html);

然后使用类选择器在单击的 img-folder 中查找具有类 folder-names 的元素:

 $(function(){
$(document.body).on('click',".img-folder",function(e){
 var folderval = $(this).find(".folder-names").val();
 console.log($(this).find(".folder-names").val());
  //e.preventDefault();
  $.ajax({
    url:'<?php echo base_url("Welcome/show_image"); ?>',
    type:'POST',
    data:folderval ,
    success:function(data){
      console.log(data);

    },
  });
 });
});