0

2つの異なる召喚ボタン（rowとnot_row）に共通のダイアログが必要です。各ボタンは、異なるdata（）変数を設定します。設定されている変数に基づいて、ダイアログの反応は異なります。

以下はほぼ動作します。問題は、行が最初にクリックされた後、not_row、$（this）.data（'row'）が設定されたままになるため、ifステートメントがそれに応じて機能しないことです。1つのオプションは、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

以下のコードのように、ダイアログボックスの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デモ

于 2012-05-10T12:16:54.260 に答える