的JavaScript獲取最接近的元素，並輸入一個值到輸入

Question

我有一段HTML的，看起來像這樣

<div id="imageContent"> 
    <div class="row"> 
    <div class="col-md-5 col-md-offset-1"> 
     <div class="input-group form-group"> 
     <input type="text" class="form-control file-src" id="file1" placeholder="File Thumb Source"> 
     <span class="input-group-btn"> 
     <button class="btn btn-info modal-btn" type="button" data-toggle="modal" data-target="#myModal">Select File</button> 
     </span> 
     </div> 
    </div> 
    <div class="col-md-5"> 
     <div class="form-group"> 
      <input class="form-control" type="text" placeholder="http://postbackurl.com"/> 
     </div> 
    </div> 
    </div> 
</div> 

上面說我有一個按鈕，看起來像這樣

<div class="row text-center"> 
    <div class="col-md-12"> 
    <button type="button" class="btn btn-wd btn-info btn-fill btn" onclick="add_fields();" rel="tooltip">Add More Images</button> 
    </div> 
</div> 

一旦該按鈕被按下我運行一個函數來獲取#imageContent div並追加一個新的行與以前一樣。

<script type="text/javascript"> 
    function add_fields() { 
    var div = document.getElementById("imageContent"); 
    div.insertAdjacentHTML('afterend','<div class="row"><div class="col-md-5 col-md-offset-1"> <div class="input-group form-group"><input type="text" class="form-control file-src" id="file1" placeholder="File Thumb Source"><span class="input-group-btn"> <button class="btn btn-info modal-btn" type="button" data-toggle="modal" data-target="#myModal">Select File</button> </span> </div> </div> <div class="col-md-5"> <div class="form-group"> <input class="form-control" type="text" placeholder="http://postbackurl.com"/> </div> </div> </div>'); 
} 

</script> 

這是按預期方式工作並在imageContent div中添加一行。

見圖片。如果我點擊選擇圖像，它會啓動一個模式窗口，其中包含我的所有圖像，當我選擇它時，它會運行這個js。

onInsertCallback: function (obj){ 
       /** Populate the src **/ 
       currentModalBtn.closest('.input-group').find('input.file-src').val(obj.src);    
       $('#myModal').hide(); 
      } 

我遇到的問題是它沒有得到正確的輸入區域來插入值，而是總是更新第一個元素。完整的js代碼看起來像這樣。

$(document).ready(function() { 
    jQuery(document).ready(function() { 

    /** Keep track of which modal button was clicked. **/ 
    var currentModalBtn; 
    jQuery('.modal-btn').click(function() { 
     currentModalBtn = jQuery(this); 
    }); 

    jQuery('.laradrop').laradrop({ 
     onInsertCallback: function(obj) { 
     /** Populate the src **/ 
     currentModalBtn.closest('.input-group').find('input.file-src').val(obj.src); 
     $('#myModal').hide(); 
     }, 
     onErrorCallback: function(jqXHR, textStatus, errorThrown) { 
     // if you need an error status indicator, implement here 
     //Swal here 
     swal({ 
      title: 'Error!', 
      text: 'An Error Occurred', 
      type: 'error', 
      showConfirmButton: false, 
      showCancelButton: true 
     }); 
     }, 
     onSuccessCallback: function(serverData) { 
     // 
     } 
    }); 
    }); 
}); 

我的問題是，我怎麼能保證我得到的字段值，並確保其他人留下來，因爲他們是正確的輸入框，按鈕被點擊上更新。

Answer 1

移動var currentModalBtn;外的準備所以它是提供給回調（S）

而且只有一個

$(document).ready(function() { 
    jQuery(document).ready(function() { 

你的jQuery/$等等亂七八糟的 - 這可能會工作好：

function add_fields() { 
 
    var $div = $("#imageContent"); 
 
    $div.append('<div class="row"><div class="col-md-5 col-md-offset-1"> <div class="input-group form-group"><input type="text" class="form-control file-src" id="file1" placeholder="File Thumb Source"><span class="input-group-btn"> <button class="btn btn-info modal-btn" type="button" data-toggle="modal" data-target="#myModal">Select File</button> </span> </div> </div> <div class="col-md-5"> <div class="form-group"> <input class="form-control" type="text" placeholder="http://postbackurl.com"/> </div> </div> </div>'); 
 
} 
 

 
var currentModalBtn; 
 
$(function() { 
 
    /** Keep track of which modal button was clicked. **/ 
 
    $("#imageContent").on("click",".modal-btn", function() { 
 
    currentModalBtn = $(this); 
 
    }); 
 
    $("#test").on("click",function() { 
 
     currentModalBtn.closest('.input-group').find('input.file-src').val("hello"); 
 
     $('#myModal').hide(); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<div class="row text-center"> 
 
    <div class="col-md-12"> 
 
    <button type="button" class="btn btn-wd btn-info btn-fill btn" onclick="add_fields();" rel="tooltip">Add More Images</button> 
 
    </div> 
 
</div> 
 
<div id="imageContent"> 
 
    <div class="row"> 
 
    <div class="col-md-5 col-md-offset-1"> 
 
     <div class="input-group form-group"> 
 
     <input type="text" class="form-control file-src" id="file1" placeholder="File Thumb Source"> 
 
     <span class="input-group-btn"> 
 
     <button class="btn btn-info modal-btn" type="button" data-toggle="modal" data-target="#myModal">Select File</button> 
 
     </span> 
 
     </div> 
 
    </div> 
 
    <div class="col-md-5"> 
 
     <div class="form-group"> 
 
      <input class="form-control" type="text" placeholder="http://postbackurl.com"/> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div> 
 

 
<button type="button" id="test"> 
 
click 
 
</button>