如何使用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控制器，以便我可以检索该文件夹内的图像。为此我附加了一个带有隐藏属性的输入标签，将文件夹名称打印为值，以便我可以很容易地使用.val（）获取值。

但是这里的问题是我怎么知道哪个文件夹被点击了，属于那个div的<input>标签的价值是什么，因为每个打印的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); 

    }, 
    }); 
}); 
}); 

Answer 2

这是你所需要的 -

使用jQuery this，你会得到属性该元素的值。所以，你的情况是input。您将存储该属性值并将其传递给AJAX调用。