重复功能不起作用

Question

Right now I have multiple dialog boxes, and have written the following so that the right button opens up the right dialog box.

$(function() {
var i = 0;
if (i < 50) {
    i++;
        $( ".dialog" + i ).dialog({
            autoOpen: false,
            width: 900,
            show: {
            effect: "fade",
            duration: 500
        },
        hide: {
            effect: "fade",
            duration: 500
        }
        });
        $( ".opener" + i ).click(function() {
            $( ".dialog" + i ).dialog( "open" );
        });
    }
});

However, nothing happens now when I click on the buttons. What am I missing here?

Answer 1

use while(){} instead of if(){}

$(function() {
    var i = 0;
    while (i < 50) {
        i++;
            $( ".dialog" + i ).dialog({
                autoOpen: false,
                width: 900,
                show: {
                effect: "fade",
                duration: 500
            },
            hide: {
                effect: "fade",
                duration: 500
            }
            });
            $( ".opener" + i ).click(function() {
                $( ".dialog" + i ).dialog( "open" );
            });
        }
});

Answer 2

Wrote a simpler solution for this just to demonstrate the right technique.
HTML:

<ul>
    <li class="open" data-modalID="1">open 1</li>
    <li class="open" data-modalID="2">open 2</li>
</ul>

<ul>
    <li class="modal modal_1">Hi, I'm modal 1</li>
    <li class="modal modal_2">Hi, I'm modal 2</li>
</ul>

CSS:

.modal { display: none; }

jQuery:

(function() {
    $('.open').on('click', function() {
        var modalID =  $(this).attr('data-modalID');

        $('.modal_' + modalID).show();
    });
})();

See http://jsfiddle.net/YAkpq/