Question

我想有一个两个不同的号召性用语按钮（row和not_row）共有的对话框。每个按钮都会设置不同的data（）变量。根据设置的变量，对话框的反应会有所不同。

以下几乎可行。问题是如果首先单击行，则not_row，$（this）.data（'row'）保持设置，因此if语句不会相应地执行操作。一个选项是在我的点击功能中添加另一个数据变量，例如数据（'type'，'row'）和数据（'type'，'not_row'），但这似乎是浪费。

有什么建议吗？

http://jsfiddle.net/FYWY7/

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Dialogs</title>
<link type="text/css" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" language="javascript"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js" language="javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
    $("#not_row").click(function(){$("#dialog").data('id',$(this)).dialog("open");});
    $("#row").click(function(){$("#dialog").data('row',$(this)).dialog("open");});

    $("#dialog").dialog({
        autoOpen    : false,
        resizable   : false,
        height      : 330,
        width       : 430, 
        modal       : true,
        buttons: [
        {
            text    : 'CLICK',
            click   : function() {
                $(this).dialog("close");
                if($(this).data('row')) {alert('row');}
                else {alert('not row');}
            }
        }
        ]
    });

});
</script>
</head>
<body>
<input type="button" value="row" id="row" data-bla="whatever" />
<input type="button" value="not_row" id="not_row" data-bla="whatever" />
<div id="dialog"></div>
</body>
</html>

Answer 1

这是我的解决方案。此脚本的目的是删除记录。如果在主页面上，则传递ID，删除记录，然后重新加载页面。或者您可以从列表中删除一行，因此将包含该ID的行作为属性传递，删除该记录，并从DOM中删除该行。我的解决方案是检查传递的变量是对象还是数字（字符串）。

PS。谢谢拉维

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Dialogs</title>
<link type="text/css" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" language="javascript"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js" language="javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
    $("#not_row").click(function(){$("#dialog").data('id',$(this).attr('data-id')).dialog("open");});
    $("#row").click(function(){$("#dialog").data('row',$(this)).dialog("open");});

    $("#dialog").dialog({
        autoOpen    : false,
        resizable   : false,
        height      : 330,
        width       : 430, 
        modal       : true,
        buttons: [
        {
            text    : 'CLICK',
            click   : function() {
                $(this).dialog("close");
                if(typeof $(this).data('i') == "object") {alert('Delete record and delete row');}
                else {alert('Delete record and redirect');} 
            }
        }
        ]
    });

});
</script>
</head>
<body>
<input type="button" value="Delete Row" id="row" data-id='123' />
<input type="button" value="Delete ID" id="not_row" data-id='234' />
<div id="dialog"></div>
</body>
</html>

Answer 2

您需要将数据传递到对话框的open函数，如下面的代码，您可以使用data-属性来传递值。 jquery Data()方法将读取值。

$('#row').click(function()
  {
     $("#dialog").data('id',$(this).data('row')).dialog('open'); 
  });

 $('#not_row').click(function()
  {
     $("#dialog").data('id',$(this).data('row')).dialog('open'); 
  });

工作演示：JsFiddle Demo

使用数据变量来影响对话框

2 个答案: