2

假设我有五个 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>

查询代码：

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示例在这里。

4

1 回答 1

2

你可以这样尝试

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

于 2013-10-16T06:27:09.767 回答