Question

我的目标是为每个点击的项目显示不同的对话框。我目前有一个设置，并认为我可以添加一个if语句。如果在div_a，dialog_a上进行mousedown，否则如果在div_b，dialog_b等上进行了moused ...我是编码的新手并且无法想出这个。

以下是我的对话框代码：

$(document).ready(function(){
$("#questiona").mousedown(function(){
    $("#dialoga").dialog();
});
});

Answer 1

由于您不熟悉编码，我建议使用jQuery团队的jQueryUI库 - 其中包含.dialog()功能（他们称之为＆＃34; widget＆＃34;）。以下是它的工作原理：

（1）在<head></head>标记中包含jQuery 和 jQueryUI库。请注意，您还必须为jQueryUI包含适当的CSS主题库（或者对话框将不可见）：

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/flick/jquery-ui.css" />
    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>

（2）在HTML中创建一个空div，并将其初始化为对话框：

HTML：

<div id="myDlg"></div>

jquery的：

$('#myDlg').dialog({
    autoOpen:false,
    modal:true,
    width: 500,
    height: 'auto'
});

（3）然后，当您准备好显示对话框时，在打开对话框之前将新数据插入myDlg div：

$('#myDlg').html('<div>This will display in the dialog</div>');
$('#myDlg').dialog('open');

以上允许您更改对话框的内容，并且每次都使用重新相同的对话框DIV。

以下是工作示例的样子：

jsFiddle Demo

<强> HTML：

<div id="myDlg"></div>
<div id="questiona" class="allques">
    <div class="question">What is 2 + 2?</div>
    <div class="answer">4</div>
</div>
<div id="questionb" class="allques">
    <div class="question">What is the 12th Imam?</div>
    <div class="answer">The totally wacky reason why Iran wants a nuclear bomb.</div>
</div>

<强> jQuery的：

var que,ans;

$('#myDlg').dialog({
    autoOpen:false,
    modal:true,
    width: 500,
    height: 'auto',
    buttons: {
        "See Answer": function(){
            $('#myDlg').html(ans);
            $('.ui-dialog-buttonset').next('button').hide();
        },
        "Close": function(){
            $('#myDlg').html('').dialog('close');
        }
    }
});

$('.allques').click(function(){
    que = $(this).find('.question').html();
    ans = $(this).find('.answer').html();
    $('#myDlg').html(que).dialog('open');
});

资源：

How to use Plugins for PopUp

http://jqueryui.com/dialog/

http://blog.nemikor.com/2009/04/08/basic-usage-of-the-jquery-ui-dialog/

jQuery UI Dialog Box - does not open after being closed

Dynamically changing jQueryUI dialog buttons

jQuery UI dialog - problem with event on close

if else if mousedown事件的声明

1 个答案: