不是一次打開X對話框，而是使用公共代碼行

假設我有五個div按鈕，每個按鈕都打開一個對話框。對於每個按鈕我有做這樣的事情在我的jQuery腳本...不是一次打開X對話框，而是使用公共代碼行

$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例here。

來源

2013-10-16 Simonetos The Greek

你可以嘗試這樣的

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-16 06:27:09 Praveen

謝謝你我的朋友！ –

@GreenMadness我的榮幸幫助你的朋友:) – Praveen

不是一次打開X對話框，而是使用公共代碼行

回答

相關問題