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; 在就緒之外，因此可供回調使用

也只有一個

$(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>