根据按钮名称显示模式

Question

我是 javascript 新手，想根据按钮标签或名称打开多个不同的模式。

我正在执行 ajax 调用，然后将根据按钮标签/名称打开一个模式。

如果有人能指出我正确的方向，那就太好了。下面是我目前使用的，它适用于一种模式，但不适合不同的模式 id。任何帮助将不胜感激。

//form button script

<form action="https://test.com/testme.html" method="post" class="ajax">
<button class="item" id="test1" name="testing" value="1" data-toggle="tooltip" data-placement="top" type="submit" title="" data-original-title="test1">
</button>
</form>

//javascript
<script>
$(document).ready(function() {

$('form.ajax').on('submit', function(event) {
   event.preventDefault();
   var that = $(this),
   url = that.attr('action'),
   type = that.attr('method'),
   data = {};

   that.find('[name]').each(function(index, value) {
      var that = $(this),
      name = that.attr('name'),
      value = that.val();

      data[name] = value;
   });

   // AJAX request
         $.ajax({
         url: url,
         type: type,
         data: data,
         success: function(response){
   // Add response in Modal body
   $('.modal-body').html(response);

   // Display Modal
   $('#MyModal').modal('show');//want #MyModal to be var button id test1 so $('#test1').modal('show')
    }
});
});
});
</script>

Answer 1

你可以这样做：

    <form action="https://test.com/testme.html" method="post" class="ajax">
    <button class="item" id="test1" data-model-name="modal1" value="1" data-toggle="tooltip" data-placement="top" type="submit" title="" data-original-title="test1">
    </button>
    <button class="item" id="test2" data-model-name="modal2" value="2" data-toggle="tooltip" data-placement="top" type="submit" title="" data-original-title="test2">
    </button>
    </form>

在 jquery 中：

    $('form.ajax').on('submit', function(event) { 
    event.preventDefault(); 
    let activeButton = $(document.activeElement).data('model-name'); 
    $(`#${activeButton}`).modal('show');
    }