Javascript和JQuery UI的while循环失败

While-loop with Javascript and JQuery UI failes

本文关键字：while 循环 失败 UI JQuery Javascript      更新时间：2023-09-26

我使用JQuery UI库和Dialog函数。

我想在我的javascript中创建多个触发器。

这是我原来的JS:

$j(function() {
    $j( "#dialog1" ).dialog({
        autoOpen: false,
        show: "slide",
        hide: "explode"
    });
    $j( "#dialog2" ).dialog({
        autoOpen: false,
        show: "slide",
        hide: "explode"
    });
    ...
    $j( ".opener1" ).click(function() {
        $j( "#dialog1" ).dialog( "open" );
        return false;
    })
    $j( ".opener2" ).click(function() {
        $j( "#dialog2" ).dialog( "open" );
        return false;
    })
    ...
});

我至少需要一打这样的触发器。那么，我们来创建一个php While循环。
像这样:

<?php
    $i = 1;
    while ($i <= 10) {
        echo '$j( "#dialog'.$i.'" ).dialog({
        autoOpen: false,
        show: "slide",
        hide: "explode"
        });';
    $i++;
    }
    $q = 1;
    while ($q <= 10) {
        echo '$j( ".opener'.$q.'" ).click(function() {
        $j( "#dialog1" ).dialog( "open" );
            return false;
        })';
    $q++;
    }?>

对于第一个while，它都工作得很好。它确实奏效了。但是对于第二个while，页面只是忽略了整个JS/PHP块…

我做错了什么?

第二个while循环中的这一行:

$j( "#dialog1" ).dialog( "open" );

应该是:

$j( "#dialog' . $q . '" ).dialog( "open" );

现在你所有的点击处理程序都会打开#dialog1我猜这不是你想要做的

你可以像上面建议的那样在js中做所有的事情:

for (var i=1;i<=10;i++) {
  $j('#dialog' + i).dialog({
    autoOpen: false,
    show: "slide",
    hide: "explode"
  });
  $j('.opener' + i).click(function() {
    $j( "#dialog" + i).dialog( "open" );
    return false;
  }
}

您可以仅使用jQuery通过使用一个类(它将成为它们的选择器)链接所有对话框来生成上述所有内容，并将打开器与它们各自的对话框链接起来，如下面的示例所示:

http://jsfiddle.net/Awh7D/

至少在第一种情况下，你应该能够使用"多个选择器"，就像在

$j( "#dialog1, #dialog2, #dialog3" ).dialog({
    autoOpen: false,
    show: "slide",
    hide: "explode"
});

编辑(在"working break"之后)

第二部分，即在函数内部引用对象的地方，应该像这样工作:

$j( ".opener1, .opener2, .opener3" ).click(function() {
    $j(this).dialog( "open" );
    return false;
});

对不起，我现在不能模拟，所以有点如履薄冰，你会原谅我的。

我同意Clive的看法:

$q = 1;
    while ($q <= 10) {
        echo '$j( ".opener'.$q.'" ).click(function() {
        $j( "#dialog1" ).dialog( "open" );
            return false;
        })';
    $q++;
    }?>

应该是:

$q = 1;
    while ($q <= 10) {
        echo '$j( ".opener'.$q.'" ).click(function() {
        $j( "#dialog'.$q.'" ).dialog( "open" );
            return false;
        })';
    $q++;
    }?>

您还可以在对话框/打开器之间共享一个类。下面是一个简单的例子

http://jsfiddle.net/ZbMcA/

相关文章：