不是立即打开X对话框，而是使用公共代码行
不是立即打开X对话框，而是使用公共代码行
提问于 2013-10-16 06:24:21
假设我有五个div按钮，每个按钮都打开一个对话框。对于每个按钮，我都会在jquery脚本中添加这样的内容.
$JQ_("#opener_1").click(function(){$JQ_("#dialog_1").dialog("open");});
$JQ_("#opener_2").click(function(){$JQ_("#dialog_2").dialog("open");});
$JQ_("#opener_3").click(function(){$JQ_("#dialog_3").dialog("open");});
$JQ_("#opener_4").click(function(){$JQ_("#dialog_4").dialog("open");});
$JQ_("#opener_5").click(function(){$JQ_("#dialog_5").dialog("open");});在我的情况下，我想做的是使用这部分代码一次，而不是五次。有什么想法吗？
HTML代码：
<div id="opener_1" class="opener_1">OPEN #1</div>
<div id="opener_2" class="opener_2">OPEN #2</div>
<div id="opener_3" class="opener_3">OPEN #3</div>
<div id="opener_4" class="opener_4">OPEN #4</div>
<div id="opener_5" class="opener_5">OPEN #5</div>
<div id="dialog_1" class="opener_1">OPEN #1</div>
<div id="dialog_2" class="opener_2">OPEN #2</div>
<div id="dialog_3" class="opener_3">OPEN #3</div>
<div id="dialog_4" class="opener_4">OPEN #4</div>
<div id="dialog_5" class="opener_5">OPEN #5</div>JQUERY代码：
var $JQ_ = jQuery.noConflict();
$JQ_(function(){
$JQ_('[id^="dialog"]').dialog({autoOpen:false,
width:'auto',
height:'auto',
resizable:false,
show:{effect:"fade", duration:250},
hide:{effect:"fade", duration:250}
});
$JQ_("#opener_1").click(function(){$JQ_("#dialog_1").dialog("open");});
$JQ_("#opener_2").click(function(){$JQ_("#dialog_2").dialog("open");});
$JQ_("#opener_3").click(function(){$JQ_("#dialog_3").dialog("open");});
$JQ_("#opener_4").click(function(){$JQ_("#dialog_4").dialog("open");});
$JQ_("#opener_5").click(function(){$JQ_("#dialog_5").dialog("open");});
});JSFIDDLE示例这里。
回答 1
Stack Overflow用户
回答已采纳
发布于 2013-10-16 06:27:09
你可以这样做
1)使用this获取正在单击的元素。
$JQ_("[id^='opener_']").click(function(){
console.log(this); //returns the element that is being click
});2)获取被单击元素的id，并将其拆分成如下所示的数字
this.id.split('_')[1]3)现在将其绑定到您的对话框id，如下所示
$JQ_("#dialog_" + this.id.split('_')[1]).dialog("open");}); 您的最终代码看起来就像
$JQ_("[id^='opener_']").click(function(){
$JQ_("#dialog_" + this.id.split('_')[1]).dialog("open");});
});检查这个JSFiddle
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/19396526
复制相关文章
相似问题
腾讯云开发者
