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 / $等等 - 这可能会更好：

＆＃13;

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

＆＃13;

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

＆＃13;

JavaScript获取最接近的元素并为输入输入值

1 个答案: