jquery - 单击功能进入模态按钮的值参数

Question

我试图将一个值传递给按下模态按钮时拍摄的函数。该模型与 map 上的一个点相关联。这个想法是允许通过单击打开的模态按钮来删除 dB 中的点。

我的模式代码是:

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalTitle">TITLE</h4>
      </div>
      <div class="modal-body">
        <img src="" id="imagepreview" style="width: 400px; height: 264px;" >
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Cierra</button>
        <button type="button" class="btn btn-danger" id="btn-eliminar" data-customer-id="myModalTitle" onclick="myCall()">Erase Point</button>
      </div>
    </div>
  </div>
</div>

模态显示标题和照片。最后一个按钮拍摄 ajax 功能:

function myCall() {
                    var self = $(this);
                    console.log(self.data("customer-id"));
                    alert('You clicked ' + self.data("customer-id")); 
                    var request = $.ajax({
                        url: "ajax.php",
                        type: "GET",            
                        dataType: "html"
                    });

                    request.done(function(msg) {
                        $("#mybox").html(msg);
                        $('#myModal').modal('hide');

                    });

                    request.fail(function(jqXHR, textStatus) {
                        alert( "Request failed: " + textStatus );
                        $('#myModal').modal('hide');

                    });
                }

我想将客户 ID(在本例中为标题)传递给 ajax php。但控制台网络给我“未定义”。

我哪里错了？

Answer 1

您需要在 html 中将元素作为对象传递给您的函数，例如

<button type="button" 
     class="btn btn-danger" 
     id="btn-eliminar" 
     data-customer-id="myModalTitle" 
     onclick="myCall(this)">
    Erase Point
</button>

以及在函数中

function myCall(self) { //self will hold HTML object your button
   self = $(self); //converting that object to jQuery object
   ...

重点是函数内部的 this 指的是函数内部范围而不是您单击的按钮，其余都很好

编辑 2:添加代码片段

function myCall(self) {
  self = $(self);
  console.log(self.data("customer-id"));
  alert('You clicked ' + self.data("customer-id")); 
  
  alert($('#myModal #'+self.data("customer-id")).text());
  var request = $.ajax({
    url: "ajax.php",
    type: "GET",            
    dataType: "html"
  });

  request.done(function(msg) {
    $("#mybox").html(msg);
    $('#myModal').modal('hide');

  });

  request.fail(function(jqXHR, textStatus) {
    alert( "Request failed: " + textStatus );
    $('#myModal').modal('hide');

  });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalTitle">TITLE</h4>
      </div>
      <div class="modal-body">
        <img src="" id="imagepreview" style="width: 400px; height: 264px;" >
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Cierra</button>
        <button type="button" class="btn btn-danger" id="btn-eliminar" data-customer-id="myModalTitle" onclick="myCall(this)">Erase Point</button>
      </div>
    </div>
  </div>
</div>