2

Let's say I have five div buttons and each one opens a dialog box. For each button I have make something like this into my jquery script...

$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");});

What I want to do is to use this part of code once and not five times, in my case. Any idea?

HTML CODE:

<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 CODE:

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 Example here.

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 に答える