问题描述
我的目标是为每个点击的项目出现一个不同的对话框。我目前有一个设置,并认为我可以添加一个if语句。如果mouseown在div_a,dialog_a,否则如果mousedown在div_b,dialog_b等...我是新的编码,不能这个数字。
My goal is to have a different dialog box appear for each item clicked. I currently have one setup and figured I can just add an if statement. If mousedown on div_a, dialog_a, else if mousedown on div_b, dialog_b, etc... I am new to coding and cant figure this one out.
这是我的代码对于对话框:
Here is my code for the dialog:
$(document).ready(function(){
$("#questiona").mousedown(function(){
$("#dialoga").dialog();
});
});
推荐答案
由于你是新的编码,我建议使用jQuery团队的jQueryUI库 - 其中包含一个 .dialog()
功能(他们称之为小部件)。以下是它的工作原理:
Since you are new to coding, I suggest using the jQuery team's jQueryUI library -- which includes a .dialog()
capability (they call it a "widget"). Here's how it works:
(1)在您的<$ c $中包含jQuery 和 jQueryUI库c>< head>< / head> 标签。请注意,您还必须为jQueryUI添加适当的CSS主题库(或对话框将不可见):
(1) Include both jQuery and the jQueryUI libraries in your <head></head>
tags. Note that you must also include an appropriate CSS theme library for jQueryUI (or the dialogs will be invisible):
<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,并初始化作为一个对话框:
(2) Create an empty div in your HTML, and initialize it as a dialog:
HTML:
<div id="myDlg"></div>
jquery:
$('#myDlg').dialog({
autoOpen:false,
modal:true,
width: 500,
height: 'auto'
});
(3)然后,当您准备好显示对话框时,在打开对话框之前,将新数据插入到 myDlg
div中:
(3) Then, when you are ready to display the dialog, insert new data into the myDlg
div just before opening the dialog:
$('#myDlg').html('<div>This will display in the dialog</div>');
$('#myDlg').dialog('open');
上述允许您更改对话框的内容,并每次使用重复的对话DIV
The above allows you to change the content of the dialog and use the re-same dialog DIV each time.
这是工作示例的样子:
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');
});
资源:
Resources:
这篇关于如果else if语句在mousedown事件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!