if else if 对 mousedown 事件的声明 [英] if else if statement on mousedown event
问题描述
我的目标是为每个单击的项目显示一个不同的对话框.我目前有一个设置，并认为我可以添加一个 if 语句.如果 div_a、dialog_a 上的 mousedown，否则如果 div_b、dialog_b 等上的 mousedown... 我是编码新手，无法弄清楚这一点.
这是我的对话框代码:
$(document).ready(function(){$("#questiona").mousedown(function(){$("#dialoga").dialog();});});由于您是编码新手，我建议您使用 jQuery 团队的 jQueryUI 库——其中包含 .dialog() 功能(他们称之为小部件").以下是它的工作原理:
(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({自动打开:假，模态:真，宽度:500，高度:'自动'});(3) 然后，当您准备好显示对话框时，在打开对话框之前将新数据插入 myDlg div:
$('#myDlg').html('<div>这将显示在对话框中</div>');$('#myDlg').dialog('open');上面允许你改变对话框的内容，每次都使用重新相同的对话框DIV.
<小时>工作示例如下所示:
HTML:
<div id="myDlg"></div><div id="questiona" class="allques"><div class="question">什么是 2 + 2?</div><div class="answer">4</div></div><div id="questionb" class="allques"><div class="question">第 12 位伊玛目是什么?</div><div class="answer">伊朗想要核弹的完全古怪的原因.</div></div>jQuery:
var que,ans;$('#myDlg').dialog({自动打开:假，模态:真，宽度:500，高度:'自动'，纽扣: {查看答案":function(){$('#myDlg').html(ans);$('.ui-dialog-buttonset').next('button').hide();},关闭":函数(){$('#myDlg').html('').dialog('close');}}});$('.allques').click(function(){que = $(this).find('.question').html();ans = $(this).find('.answer').html();$('#myDlg').html(que).dialog('open');});<小时>
资源:
http://blog.nemikor.com/2009/04/08/basic-usage-of-the-jquery-ui-dialog/
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();
});
});
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) 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) 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) 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');
The above allows you to change the content of the dialog and use the re-same dialog DIV each time.
Here's what the working example would look like:
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:
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 事件的声明的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
