Question

现在我有多个对话框，并编写了以下内容，以便右键打开右侧对话框。

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

然而，当我点击按钮时，现在没有任何反应。我在这里缺少什么？

Answer 1

使用while（）{}而不是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

为此演示了一个更简单的解决方案，以展示正确的技术 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();
    });
})();

请参阅http://jsfiddle.net/YAkpq/

重复功能不起作用

2 个答案: