为什么这个 jQuery 会导致 *all* my jQuery 失败？
Why does this jQuery cause *all* my jQuery to fail?
我添加了这个 jQuery 以尝试有条件地显示某些元素：
$(document).on("click", '[id$=btnAddFoapalRow]', function (e) {
if $('[id$=foapalrow3]').not(":visible");
$('[id$=foapalrow3]').slideDown();
}
else if $('[id$=foapalrow4]').not(":visible");
$('[id$=foapalrow4]').slideDown();
}
});
此代码基于 中的代码；我将 "is" 更改为 "not" 因为我需要在该行 不 可见时采取行动。
...但它不仅不起作用（单击“+”按钮 (btnAddFoapalRow) 不会使行可见），还会导致它前面的另一个 jQuery 不起作用， 也。上面的jQuery有什么问题，为什么会这样obtrusive/obstructionistic？
这里是 jQuery 的全部 context/your 阅读乐趣：
$(document).ready(function () {
console.log('The ready function has been reached'); /* This is a "sanity check" so it can be verified that this jQuery script is running/ran */
});
/* If the select "Yes" (self-identify as UCSC Faculty, Staff, or Student), prompt them to log in */
$(document).on("change", '[id$=ckbxUCSCFacultyStaffOrStudent]', function () {
var ckd = this.checked;
if (ckd) alert('Please log in prior to continuing with this form');
});
/* If the select "Yes" (they are seeking payment for themselves, as opposed to someone else), omit (invisibilize) sections 2 and 3 on the form */
$(document).on("change", '[id$=ckbxPaymentForSelf]', function () {
if (this.checked) {
$('[id$=panelSection2]').slideUp();
$('[id$=panelSection3]').slideUp();
$('[id$=rbPaymentToIndividual]').prop("checked", true);
$('[id$=_MailStopRow]').slideDown();
$('[id$=_AddressRows]').slideUp();
}
else {
$('[id$=panelSection2]').slideDown();
$('[id$=panelSection3]').slideDown();
$('[id$=rbPaymentToIndividual]').prop("checked", false);
$('[id$=_MailStopRow]').slideUp();
$('[id$=_AddressRows]').slideDown();
}
});
/* When "UCSC insider" checkbox changes state, set up txtbxSSNOrITIN accordingly - was ckbxEmp, which has been deprecated/removed */
$(document).on("change", '[id$=ckbxUCSCFacultyStaffOrStudent]', function () {
var ssnmaxlen = 4;
var itinmaxlen = 11;
var ssntextboxwidth = 40;
var itintextboxwidth = 100;
var ckd = this.checked;
var $input = $('[id$=txtbxSSNOrITIN]');
var $lbl = $('[id$=lblSSNOrITIN]');
if (ckd) $input.data("oldValue", $input.val()); // Remember current value
$input.prop("maxlength", ckd ? ssnmaxlen : itinmaxlen).css({
background: ckd ? 'yellow' : 'lightgreen',
width: ckd ? ssntextboxwidth : itintextboxwidth
}).val(function (i, v) {
/* If checked, trim textbox contents to ssnmaxlen characters */
return ckd && v.length > ssnmaxlen ? v.slice(0, ssnmaxlen) : $input.data("oldValue");
});
$lbl.text(ckd ? "SSN - last 4 digits" : "ITIN");
/* This sets focus to the end of the textbox (multiplication by 2 is because some characters are counted as two) */
var strLength = $input.val().length * 2;
$input.focus();
$input[0].setSelectionRange(strLength, strLength);
});
$(document).on("keypress", '[id$=txtbxSSNOrITIN]', function (e) {
/* For now, just "eating" non-numeric entries (from http://jsfiddle.net/zpg8k/); will change when the business rules for ITIN are known */
var k = e.which;
if (k < 48 || k > 57) { e.preventDefault(); }
});
$(document).on("click", '[id$=btnAddFoapalRow]', function (e) {
if $('[id$=foapalrow3]').not(":visible");
$('[id$=foapalrow3]').slideDown();
}
else if $('[id$=foapalrow4]').not(":visible");
$('[id$=foapalrow4]').slideDown();
}
});
这是在 Sharepoint 2010 项目中。我也尝试使用服务器端 (C#) 代码来完成同样的事情，但这也不起作用，因为每次单击按钮都会再次提交页面。我在这里问过 [
相关的代码隐藏是：
HtmlButton btnAddFoapalRow = null;
. . .
btnAddFoapalRow = new HtmlButton();
btnAddFoapalRow.Attributes["type"] = "button";
btnAddFoapalRow.InnerHtml = "+";
btnAddFoapalRow.ID = "btnAddFoapalRow";
this.Controls.Add(btnAddFoapalRow);
foapalrow3 = new HtmlTableRow();
foapalrow3.ID = "foapalrow3";
foapalrow3.Visible = false;
. . .
foapalrow3 = new HtmlTableRow();
foapalrow3.ID = "foapalrow3";
foapalrow3.Visible = false;
更新
我将 jQuery 更改为这个，这样我就可以验证代码是否已到达（添加对 console.log() 的调用）：
$(document).on("click", '[id$=btnAddFoapalRow]', function (e) {
if ($('[id$=foapalrow3]').not(":visible")) {
console.log('reached the foapalrow3 not visible branch');
$('[id$=foapalrow3]').slideDown();
}
else if ($('[id$=foapalrow4]').not(":visible")) {
console.log('reached the foapalrow4 not visible branch');
$('[id$=foapalrow4]').slideDown();
}
});
...我确实在 Chrome 的控制台中看到 'reached the foapalrow3 not visible branch'，但页面上没有任何视觉效果。
我想知道我是否真的需要这样的东西：
$('[id$=foapalrow3]').visible();
而不是这个：
$('[id$=foapalrow3]').slideDown();
？如果是这样，正确的语法是什么（将可见设置为真）？
更新 2
我试过这个：
$('[id$=foapalrow3]').attr("visibility", "visible");
...但在 Mudville 没有快乐。
这是完全错误的：
if $('[id$=foapalrow3]').not(":visible");
$('[id$=foapalrow3]').slideDown();
}
else if $('[id$=foapalrow4]').not(":visible");
$('[id$=foapalrow4]').slideDown();
}
改为：
if ($('[id$=foapalrow3]').not(":visible")) {
$('[id$=foapalrow3]').slideDown();
}
else if ($('[id$=foapalrow4]').not(":visible")) {
$('[id$=foapalrow4]').slideDown();
}
我添加了这个 jQuery 以尝试有条件地显示某些元素：
$(document).on("click", '[id$=btnAddFoapalRow]', function (e) {
if $('[id$=foapalrow3]').not(":visible");
$('[id$=foapalrow3]').slideDown();
}
else if $('[id$=foapalrow4]').not(":visible");
$('[id$=foapalrow4]').slideDown();
}
});
此代码基于
...但它不仅不起作用（单击“+”按钮 (btnAddFoapalRow) 不会使行可见），还会导致它前面的另一个 jQuery 不起作用， 也。上面的jQuery有什么问题，为什么会这样obtrusive/obstructionistic？
这里是 jQuery 的全部 context/your 阅读乐趣：
$(document).ready(function () {
console.log('The ready function has been reached'); /* This is a "sanity check" so it can be verified that this jQuery script is running/ran */
});
/* If the select "Yes" (self-identify as UCSC Faculty, Staff, or Student), prompt them to log in */
$(document).on("change", '[id$=ckbxUCSCFacultyStaffOrStudent]', function () {
var ckd = this.checked;
if (ckd) alert('Please log in prior to continuing with this form');
});
/* If the select "Yes" (they are seeking payment for themselves, as opposed to someone else), omit (invisibilize) sections 2 and 3 on the form */
$(document).on("change", '[id$=ckbxPaymentForSelf]', function () {
if (this.checked) {
$('[id$=panelSection2]').slideUp();
$('[id$=panelSection3]').slideUp();
$('[id$=rbPaymentToIndividual]').prop("checked", true);
$('[id$=_MailStopRow]').slideDown();
$('[id$=_AddressRows]').slideUp();
}
else {
$('[id$=panelSection2]').slideDown();
$('[id$=panelSection3]').slideDown();
$('[id$=rbPaymentToIndividual]').prop("checked", false);
$('[id$=_MailStopRow]').slideUp();
$('[id$=_AddressRows]').slideDown();
}
});
/* When "UCSC insider" checkbox changes state, set up txtbxSSNOrITIN accordingly - was ckbxEmp, which has been deprecated/removed */
$(document).on("change", '[id$=ckbxUCSCFacultyStaffOrStudent]', function () {
var ssnmaxlen = 4;
var itinmaxlen = 11;
var ssntextboxwidth = 40;
var itintextboxwidth = 100;
var ckd = this.checked;
var $input = $('[id$=txtbxSSNOrITIN]');
var $lbl = $('[id$=lblSSNOrITIN]');
if (ckd) $input.data("oldValue", $input.val()); // Remember current value
$input.prop("maxlength", ckd ? ssnmaxlen : itinmaxlen).css({
background: ckd ? 'yellow' : 'lightgreen',
width: ckd ? ssntextboxwidth : itintextboxwidth
}).val(function (i, v) {
/* If checked, trim textbox contents to ssnmaxlen characters */
return ckd && v.length > ssnmaxlen ? v.slice(0, ssnmaxlen) : $input.data("oldValue");
});
$lbl.text(ckd ? "SSN - last 4 digits" : "ITIN");
/* This sets focus to the end of the textbox (multiplication by 2 is because some characters are counted as two) */
var strLength = $input.val().length * 2;
$input.focus();
$input[0].setSelectionRange(strLength, strLength);
});
$(document).on("keypress", '[id$=txtbxSSNOrITIN]', function (e) {
/* For now, just "eating" non-numeric entries (from http://jsfiddle.net/zpg8k/); will change when the business rules for ITIN are known */
var k = e.which;
if (k < 48 || k > 57) { e.preventDefault(); }
});
$(document).on("click", '[id$=btnAddFoapalRow]', function (e) {
if $('[id$=foapalrow3]').not(":visible");
$('[id$=foapalrow3]').slideDown();
}
else if $('[id$=foapalrow4]').not(":visible");
$('[id$=foapalrow4]').slideDown();
}
});
这是在 Sharepoint 2010 项目中。我也尝试使用服务器端 (C#) 代码来完成同样的事情，但这也不起作用，因为每次单击按钮都会再次提交页面。我在这里问过 [
相关的代码隐藏是：
HtmlButton btnAddFoapalRow = null;
. . .
btnAddFoapalRow = new HtmlButton();
btnAddFoapalRow.Attributes["type"] = "button";
btnAddFoapalRow.InnerHtml = "+";
btnAddFoapalRow.ID = "btnAddFoapalRow";
this.Controls.Add(btnAddFoapalRow);
foapalrow3 = new HtmlTableRow();
foapalrow3.ID = "foapalrow3";
foapalrow3.Visible = false;
. . .
foapalrow3 = new HtmlTableRow();
foapalrow3.ID = "foapalrow3";
foapalrow3.Visible = false;
更新
我将 jQuery 更改为这个，这样我就可以验证代码是否已到达（添加对 console.log() 的调用）：
$(document).on("click", '[id$=btnAddFoapalRow]', function (e) {
if ($('[id$=foapalrow3]').not(":visible")) {
console.log('reached the foapalrow3 not visible branch');
$('[id$=foapalrow3]').slideDown();
}
else if ($('[id$=foapalrow4]').not(":visible")) {
console.log('reached the foapalrow4 not visible branch');
$('[id$=foapalrow4]').slideDown();
}
});
...我确实在 Chrome 的控制台中看到 'reached the foapalrow3 not visible branch'，但页面上没有任何视觉效果。
我想知道我是否真的需要这样的东西：
$('[id$=foapalrow3]').visible();
而不是这个：
$('[id$=foapalrow3]').slideDown();
？如果是这样，正确的语法是什么（将可见设置为真）？
更新 2
我试过这个：
$('[id$=foapalrow3]').attr("visibility", "visible");
...但在 Mudville 没有快乐。
这是完全错误的：
if $('[id$=foapalrow3]').not(":visible");
$('[id$=foapalrow3]').slideDown();
}
else if $('[id$=foapalrow4]').not(":visible");
$('[id$=foapalrow4]').slideDown();
}
改为：
if ($('[id$=foapalrow3]').not(":visible")) {
$('[id$=foapalrow3]').slideDown();
}
else if ($('[id$=foapalrow4]').not(":visible")) {
$('[id$=foapalrow4]').slideDown();
}