如何使用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調用。

$(this).on("click",function(){
   var inputValue = $(this).attr('value');
        $.ajax({
    url:'<?php echo base_url("Welcome/show_image"); ?>',
    type:'POST',
    data: inputValue ,
    success:function(data){
      console.log(data);

    },
  });
});