javascript-将数据传递到jQuery UI对话的规范方法是什么？

我有以下标记：

<div data-id="1" data-name="Product 1">Product 1 <a href="#" id="delete_1">Delete</a></div><br />
<div data-id="2" data-name="Product 2">Product 2 <a href="#" id="delete_2">Delete</a></div><br />
<div data-id="3" data-name="Product 3">Product 3 <a href="#" id="delete_3">Delete</a></div><br />
<div data-id="4" data-name="Product 4">Product 4 <a href="#" id="delete_4">Delete</a></div><br />

<div id="delete-product" title="Delete product?">
  <p>
    <span 
      class="ui-icon ui-icon-alert" 
      style="float:left; margin:0 7px 20px 0;">
    </span>
    This product will be permanently deleted and cannot be recovered. Are you sure? 
  </p> 
</div>

我有以下脚本jQuery UI：

$(function () {
  $("#delete-product").dialog({
    autoOpen: false,
    resizable: false,
    height: 140,
    modal: true,
    buttons: {
      "Delete": function () {
        $(this).dialog("close");
      },
      "Cancel": function () {
        $(this).dialog("close");
      }
    }
  });

  $("a[id^='delete']").each(function () {
    $(this).click(function () {
      $("#delete-product").dialog('open');
      return false;
    });

  });
});

如何将值传递给Delete函数,以便可以在对话框中显示它？我考虑过要设置一个全局变量,但这有点棘手.

我不介意我是否仅引用< a>引发点击事件的代码.从那里我可以解决其余的问题.

解决方法:

您可以在jQuery中使用.data()API.

$(function () {
  $("#delete-product").dialog({
    autoOpen: false,
    resizable: false,
    height: 140,
    modal: true,
    buttons: {
      "Delete": function () {
        var id = $(this).data('item-id');
        //Do something with the id
        $(this).dialog("close");
      },
      "Cancel": function () {
        $(this).dialog("close");
      }
    }
  });

  $("a[id^='delete']").each(function () {
    $(this).click(function () {
      var id = $(this).parent().attr('data-id');
      $("#delete-snapshot").data('item-id', id).dialog('open');
      return false;
    });

  });
})

编辑：只是注意到对话框的ID不匹配.但是问题出在我从您的问题中复制的代码中.

标签：jquery-ui,javascript,jquery
来源： https://codeday.me/bug/20191208/2094981.html