Jquery ui 循环内的多对话框功能

我试图从数据库中的一些数据创建一个多对话框表单，但是当我单击按钮时，对话框表单没有显示出来

我使用PHP增量数值来区分属性id

然后我使用for将php代码上的id与jquery代码上的id同步

当我尝试JSFIDLE时，它说“在引用外部作用域变量的循环之间声明的函数可能会导致语义混乱”

这是我的php代码：

<button class="btn btn-danger" id="create-user<?php echo $no2++; ?>">Buka Blokir</button>

    <div id="dialog-form<?php echo $no++; ?>" title="Create new user">
    <p class="validateTips">All form fields are required.</p>

<form>
  <fieldset>
    <label for="reason">Reason</label>
    <input type="text" name="reason" id="reason" value="Jane Smith" class="text ui-widget-content ui-corner-all">

  <input type="submit" tabindex="-1" style="position:absolute; top:-1000px">
</fieldset>
</form>
</div>

---

我觉得你把事情弄得太复杂了。考虑下面的代码。


$（函数（）{
变量原因=$（“[id^='reason']”），
提示=$（“.validateips”）；
函数更新（t）{
提示
.文本（t）
.addClass（“ui状态突出显示”）；
setTimeout（函数（）{
removeClass（“ui状态突出显示”，1500）；
}, 500);
}
函数校验长度（o、n、最小值、最大值）{
如果（o.val（）.length>max | | o.val（）.length

布卡布洛基尔酒店
所有表单字段都是必需的
理由
布卡布洛基尔酒店
所有表单字段都是必需的
理由
欢迎来到堆栈溢出。在元素上迭代，然后调用for循环外部使用的变量。这不会给你预期的结果。例如，
dialog.dialog（“打开”）将不会引用该对话框。请提供一个最小的、可复制的示例：非常感谢！我是jquery的初学者，你能告诉我在哪里可以学习如何使用这个和$（这个）吗？@Iqbal有很多教程和资源。嗨，twisty，我的ui对话框有一个问题，为什么当数字id是10的倍数时，比如10，20，30，对话框不出现？你能帮我吗？@Iqbal和选择器一起，应该没关系
$（“[id^='dialog-form']”）
在id属性的开头查找“dialog-form”。您也可以
$（“[id*='dialog-form']”）
在id属性的任何部分查找“dialog-form”。当我使用$（“[id*='dialog-form']”）时仍然不起作用，但我认为问题出在$（“#dialog-form-”+$（this.attr（“id”）.slice（-1））；
$( function() {

var dialog, form,

  reason = $( "#reason" ),
  allFields = $( [] ).add( reason ),
  tips = $( ".validateTips" );

function updateTips( t ) {
  tips
    .text( t )
    .addClass( "ui-state-highlight" );
  setTimeout(function() {
    tips.removeClass( "ui-state-highlight", 1500 );
  }, 500 );
}

function checkLength( o, n, min, max ) {
  if ( o.val().length > max || o.val().length < min ) {
    o.addClass( "ui-state-error" );
    updateTips( "Length of " + n + " must be between " +
      min + " and " + max + "." );
    return false;
  } else {
    return true;
  }
}

function checkRegexp( o, regexp, n ) {
  if ( !( regexp.test( o.val() ) ) ) {
    o.addClass( "ui-state-error" );
    updateTips( n );
    return false;
  } else {
    return true;
  }
}

function unBlock() {
  var valid = true;
  allFields.removeClass( "ui-state-error" );
  valid = valid && checkLength( reason, "reason", 6, 80 );

  if ( valid ) {
    $( "#users tbody" ).append( "<tr>" +
      "<td>" + dasar.val() + "</td>" +
    "</tr>" );
    dialog.dialog( "close" );
  }
  return valid;
}

for (var i = 1; i < 50; i++) {
dialog = $( "#dialog-form"+i ).dialog({
  autoOpen: false,
  height: 400,
  width: 350,
  modal: true,
  buttons: {
    "Unblock": unBlock,
    Cancel: function() {
      dialog.dialog( "close" );
    }
  },
  close: function() {
    form[ 0 ].reset();
    allFields.removeClass( "ui-state-error" );
  }
});
}
form = dialog.find( "form" ).on( "submit", function( event ) {
  event.preventDefault();
  addUser();
});

for (var b = 1; b < 50; b++) {
$( "#create-user"+b ).button().on( "click", function() {
  dialog.dialog( "open" );
});

}

} );