循环内的多个对话功能
Multiple dialog function inside loop
我尝试从数据库中的一些数据创建一个多对话框表单,但是当我点击按钮时,对话框表单没有显示
我使用PHP增量数字来区分属性id
然后我使用 for 将我的 php 代码上的 ID 与 jquery 代码上的 ID 同步
当我尝试使用 jsfiddle 时,它显示 "Functions declared between loop referencing an outer scoped variable may lead to confusing semantics"
这是我的 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>
这是我的 jquery 代码:
$( 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" );
});
}
} );
我认为你把它搞得太复杂了。考虑以下代码。
$(function() {
var reasons = $("[id^='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;
}
}
$("[id^='dialog-form']").dialog({
autoOpen: false,
height: 400,
width: 350,
modal: true,
buttons: {
"Unblock": function() {
var valid = true;
reasons.removeClass("ui-state-error");;
var reason = $(this).find("[id^='reason']");
valid = valid && checkLength(reason, "reason", 6, 80);
if (valid) {
/*
$("#users tbody").append("<tr>" +
"<td>" + dasar.val() + "</td>" +
"</tr>");
*/
$("[id^='dialog-form']").dialog("close");
}
return valid;
},
Cancel: function() {
$(this).dialog("close");
}
},
close: function() {
$(this).find("form")[0].reset();
reasons.removeClass("ui-state-error");
}
});
$("div[id^='dialog-form'] form").on("submit", function(e) {
e.preventDefault();
/*
addUser();
*/
});
$("button[id^='create-user']").on("click", function(e) {
var selfId = $(this).attr("id");
var d = selfId.match(/\d+/g).map(Number);
var dlg = $("#dialog-form-" + d);
dlg.dialog("open");
});
});
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<button class="btn btn-danger" id="create-user-1">Buka Blokir</button>
<div id="dialog-form-1" title="Create new user">
<p class="validateTips">All form fields are required.</p>
<form>
<fieldset>
<label for="reason-1">Reason</label>
<input type="text" name="reason" id="reason-1" value="Jane Smith" class="text ui-widget-content ui-corner-all">
<input type="submit" tabindex="-1" style="position:absolute; top:-1000px">
</fieldset>
</form>
</div>
<button class="btn btn-danger" id="create-user-20">Buka Blokir</button>
<div id="dialog-form-20" title="Create new user">
<p class="validateTips">All form fields are required.</p>
<form>
<fieldset>
<label for="reason-20">Reason</label>
<input type="text" name="reason" id="reason-2" value="John Smith" class="text ui-widget-content ui-corner-all">
<input type="submit" tabindex="-1" style="position:absolute; top:-1000px">
</fieldset>
</form>
</div>
对于包含多个元素的选择器,您仍然可以为其分配 UI 个小部件。你只需要了解如何使用 this
和 $(this)
来发挥你的优势。
我尝试从数据库中的一些数据创建一个多对话框表单,但是当我点击按钮时,对话框表单没有显示
我使用PHP增量数字来区分属性id
然后我使用 for 将我的 php 代码上的 ID 与 jquery 代码上的 ID 同步
当我尝试使用 jsfiddle 时,它显示 "Functions declared between loop referencing an outer scoped variable may lead to confusing semantics"
这是我的 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>
这是我的 jquery 代码:
$( 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" );
});
}
} );
我认为你把它搞得太复杂了。考虑以下代码。
$(function() {
var reasons = $("[id^='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;
}
}
$("[id^='dialog-form']").dialog({
autoOpen: false,
height: 400,
width: 350,
modal: true,
buttons: {
"Unblock": function() {
var valid = true;
reasons.removeClass("ui-state-error");;
var reason = $(this).find("[id^='reason']");
valid = valid && checkLength(reason, "reason", 6, 80);
if (valid) {
/*
$("#users tbody").append("<tr>" +
"<td>" + dasar.val() + "</td>" +
"</tr>");
*/
$("[id^='dialog-form']").dialog("close");
}
return valid;
},
Cancel: function() {
$(this).dialog("close");
}
},
close: function() {
$(this).find("form")[0].reset();
reasons.removeClass("ui-state-error");
}
});
$("div[id^='dialog-form'] form").on("submit", function(e) {
e.preventDefault();
/*
addUser();
*/
});
$("button[id^='create-user']").on("click", function(e) {
var selfId = $(this).attr("id");
var d = selfId.match(/\d+/g).map(Number);
var dlg = $("#dialog-form-" + d);
dlg.dialog("open");
});
});
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<button class="btn btn-danger" id="create-user-1">Buka Blokir</button>
<div id="dialog-form-1" title="Create new user">
<p class="validateTips">All form fields are required.</p>
<form>
<fieldset>
<label for="reason-1">Reason</label>
<input type="text" name="reason" id="reason-1" value="Jane Smith" class="text ui-widget-content ui-corner-all">
<input type="submit" tabindex="-1" style="position:absolute; top:-1000px">
</fieldset>
</form>
</div>
<button class="btn btn-danger" id="create-user-20">Buka Blokir</button>
<div id="dialog-form-20" title="Create new user">
<p class="validateTips">All form fields are required.</p>
<form>
<fieldset>
<label for="reason-20">Reason</label>
<input type="text" name="reason" id="reason-2" value="John Smith" class="text ui-widget-content ui-corner-all">
<input type="submit" tabindex="-1" style="position:absolute; top:-1000px">
</fieldset>
</form>
</div>
对于包含多个元素的选择器,您仍然可以为其分配 UI 个小部件。你只需要了解如何使用 this
和 $(this)
来发挥你的优势。