0

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

以下几乎可以工作。问题是如果第一次单击行，则 not_row, $(this).data('row') 保持设置，因此 if 语句不会相应地执行。一种选择是在我的点击函数中添加另一个数据变量，例如 data('type','row') 和 data('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>
4

2 回答 2

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>
于 2012-05-11T04:09:11.687 回答
0

您需要将数据传递给对话框的打开功能，如下面的代码，您可以使用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 演示

于 2012-05-10T12:16:54.260 回答