Question

我在视图中有以下js代码：

//here I initialize two variables to temporaly store values
var id = 0;
var tr = "";

$(document).on("click", ".deleteItem", function(e) {
        $('#deleteItemConfirmationModal .modal-body').html("Please confirm deleting this item");
        $('#deleteItemConfirmationModal').modal('show');   
        // here I need two parameters (id and tr) to pass them into another function, so I save them into variables      
        id = $(this).data('id');
        tr = $(this).closest("tr");
    });

然后，如果用户确认该项目应该被删除。其代码如下：

$('#deleteItemConfirmationModal .modal-footer').on('click', function(event) {
    var $button = $(event.target);
    buttonId = $button[0].id;

    if (buttonId === 'yesBtn') {
        $.ajax({
            url: '@Url.Action("Delete")',
            type: 'POST',
            data: { itemId: id },  // use first variable
            success: function (data) {
                if (data.IsOK) {
                    tr.remove();    // use second variable
                }
            }
        });
    }
});

代码工作正常。但我不认为传递这样的变量是一个好习惯。

我可以使用这种方法，还是不使用全局变量？

Answer 1

您可以将变量附加到模态。像

这样的东西

$('#deleteItemConfirmationModal').data('id', id);
$('#deleteItemConfirmationModal').data('tr', tr);

然后，当您想要使用它们时，只需获取值

var id = $('#deleteItemConfirmationModal').data('id');
var tr = $('#deleteItemConfirmationModal').data('tr');

这应该是安全的，因为这些值在它显示时适用于模态。实际上，您将它们附加到document，我就会明白为什么您会有一些不安。

Answer 2

您可以触发自定义事件并将数据传递给它们这是一个简单的例子：

＆＃13;

$('#root').on('click', '#one, #two',function(e){
  $('#root').trigger('myEvent', {param: e.target.id})
});

$('#root').on('myEvent',function(e,data){
  console.log(data.param);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div id="root">
  <div id="one" class="btn btn-info">one</div>
  <div id="two" class="btn btn-info">two</div>
</div>

＆＃13;

在javascript中将变量从一个事件处理程序传递到另一个

2 个答案: