Как получить значение входного тега внутри щелкнутого div с помощью JQuery?

Question

У меня есть следующая функция успеха Ajax, которая печатает папку div в DOM при загрузке страницы или добавлении папки.

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().

Но проблема здесь в том, что как я могу узнать, какая папка была нажата, и каково значение тега <input>, принадлежащего этому div, так как каждый напечатанный div будет иметь тот же идентификатор «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

Вы дублируете идентификаторы элемента. Идентификаторы должны быть уникальными. Вы можете дать тот же класс. как это:

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); 

, а затем использовать селектор класса, чтобы найти элемент с классом folder-names в щелкнул img-folder:

$(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-вызов.