- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
在“单击添加另一个”事件中,此变量跟踪动态生成的元素的索引:
var index = $(this).parent().parent().parent().parent().index();
它工作正常,通过控制台日志记录可以证明。 index
变量的最小值为 1,没有最大值。我创建原始 html 片段的副本并将其附加在下面,并替换输入名称(以便我可以运行 jQuery 验证):
$("[name=officeAddressLine1]:last").replaceWith("<input type='text' data-
id='"+index+"' class='otherBusinessField' id='officeAddressLine"+index+"'
name='officeAddressLine"+index+"'>");
我连接 index
的值以使输入唯一,对于第一个动态生成的元素,我得到 officeAddressLine2
(这是正确的),但之后的所有元素继续连接 2,而不是 3、4、5...
我始终能够在点击事件上记录 index
的正确值。为什么这个值在输入标记内部时不会更新?
这是 jQuery 事件处理程序:
$('#BusinessBox').on('click', '.otherOffices [value=y]', function() {
if ($(this).parent().parent().parent().parent().next().attr('name') == 'otherOffice'){
return false;
}
var index = $(this).parent().parent().parent().parent().index();
var template = $(this).parent().parent().parent().parent().html().replace(/name="otherOfficeRadio\d+"/g, function(str) {
//$('.chosen-container.chosen-container-single.chosen-container-single-nosearch', str).remove();
return str.replace(/\d+/g, function(n) {
return ++n;
});
});
template = template.replace(/id="otherOfficeRadioYes\d+"/g, function(str) {
//$('.chosen-container.chosen-container-single.chosen-container-single-nosearch', str).remove();
return str.replace(/\d+/g, function(n) {
return ++n;
});
});
template = template.replace(/id="emailProcessedByMe\d+"/g, function(str) {
return str.replace(/\d+/g, function(n) {
return ++n;
});
});
template = template.replace(/for="emailProcessedByMe\d+"/g, function(str) {
return str.replace(/\d+/g, function(n) {
return ++n;
});
});
template = template.replace(/id="emailProcessedByStaff\d+"/g, function(str) {
return str.replace(/\d+/g, function(n) {
return ++n;
});
});
template = template.replace(/for="emailProcessedByStaff\d+"/g, function(str) {
return str.replace(/\d+/g, function(n) {
return ++n;
});
});
template = template.replace(/id="weelChairAccessible\d+"/g, function(str) {
//$('.chosen-container.chosen-container-single.chosen-container-single-nosearch', str).remove();
return str.replace(/\d+/g, function(n) {
return ++n;
});
});
template = template.replace(/for="weelChairAccessible\d+"/g, function(str) {
//$('.chosen-container.chosen-container-single.chosen-container-single-nosearch', str).remove();
return str.replace(/\d+/g, function(n) {
return ++n;
});
});
template = template.replace(/id="twoBlocksFromPublicTransport\d+"/g, function(str) {
//$('.chosen-container.chosen-container-single.chosen-container-single-nosearch', str).remove();
return str.replace(/\d+/g, function(n) {
return ++n;
});
});
template = template.replace(/for="twoBlocksFromPublicTransport\d+"/g, function(str) {
//$('.chosen-container.chosen-container-single.chosen-container-single-nosearch', str).remove();
return str.replace(/\d+/g, function(n) {
return ++n;
});
});
template = template.replace(/id="otherOfficeRadioNo\d+"/g, function(str) {
//$('.chosen-container.chosen-container-single.chosen-container-single-nosearch', str).remove();
return str.replace(/\d+/g, function(n) {
return ++n;
});
});
template = template.replace(/for="otherOfficeRadioNo\d+"/g, function(str) {
//$('.chosen-container.chosen-container-single.chosen-container-single-nosearch', str).remove();
return str.replace(/\d+/g, function(n) {
return ++n;
});
});
template = template.replace(/for="otherOfficeRadioYes\d+"/g, function(str) {
//$('.chosen-container.chosen-container-single.chosen-container-single-nosearch', str).remove();
return str.replace(/\d+/g, function(n) {
return ++n;
});
});
// console.log(template);
//$('.chosen-container.chosen-container-single.chosen-container-single-nosearch', template).remove();
$('[name=otherOffice]:last').after($('<div name="otherOffice" class="yellow_sec textBlock">' + template.replace(/style=".*?"/g, '').replace(/Primary/g, 'Additional').replace(/(Additional\s\w+)\s\d*/g, '$1 ' + index + ' ') + '</div>').hide().fadeIn());
console.log(index, "INDEX");
//BEGIN change input names for other business location for validation
$("[name=officeAddressLine1]:last").replaceWith("<input type='text' data-id='"+index+"' class='otherBusinessField' id='officeAddressLine"+index+"' name='officeAddressLine"+index+"'>");
$("[name=city]:last").replaceWith("<input type='text' class='otherBusinessField' data-id='"+index+"' id='city"+index+"' name='city"+index+"'>");
$("[name=zip]:last").replaceWith("<input type='text' class='otherBusinessField' data-id='"+index+"' id='zip"+index+"' name='zip"+index+"'>");
$("[name=stateOrProvince]:last").attr('name', 'stateOrProvince'+index).addClass('otherBusinessField');
$("[name=officePhone]:last").replaceWith("<input class='otherBusinessField' type='text' data-id='"+index+"' id='officePhone"+index+"' name='officePhone"+index+"'>");
$("[name=takesCallsStart]:last").attr('name', 'takesCallsStart' + index).addClass('otherBusinessField');
$("[name=takesCallesEnd]:last").attr('name', 'takesCallesEnd' + index).addClass('otherBusinessField');
$("[name=otherOffice]:last").find('.bootstrap-switch:last').replaceWith("<input type='checkbox' class='otherBusinessField' data-id='"+index+"' id='takesCallsStartSuffix"+index+"' name='takesCallsStartSuffix"+index+"'>");
$("[name=otherOffice]:last").find('.bootstrap-switch:first').replaceWith("<input type='checkbox' class='otherBusinessField' data-id='"+index+"' id='takesCallsEndSuffix"+index+"' name='takesCallsEndSuffix"+index+"'>");
$("[name=businessEmail]:last").replaceWith("<input type='text' data-id='"+index+"' id='businessEmail"+index+"' name='businessEmail2'>");
$("[name=emailProcessedByMe]:last").replaceWith("<input type='checkbox' data-id='"+index+"' id='emailProcessedByMe"+index+"' name='emailProcessedByMe2'>");
$("[name=emailProcessedByStaff]:last").replaceWith("<input type='checkbox' data-id='"+index+"' id='emailProcessedByStaff"+index+"' name='emailProcessedByStaff2'>");
$("[name=emailRespondedBy]:last").replaceWith("<select id='emailRespondedBy"+index+"' name='emailRespondedBy2'>");
//END change input names for other business location for validation
$("#takesCallsStartSuffix"+index).bootstrapSwitch({onText:"AM", offText: "PM",onSwitchChange:takesCallsEvent});
$("#takesCallsEndSuffix"+index).bootstrapSwitch({onText:"AM", offText: "PM", state:true, onSwitchChange:takesCallsEvent});
$("[name=otherOffice]:last").find('.chosen-container').remove();
if (/MSIE (\d+\.\d+);/.test(navigator.userAgent)) {
$('input').placeholder();
}
$('.zip').mask('99999-ZZZZ', {translation: {'Z': {pattern: /[0-9]/, optional: true}}});
/*$(".takesCallsStart").chosen({disable_search_threshold: 12});
$(".takesCallsEnd").chosen({disable_search_threshold: 12});
$(".takesCallsStartSuffix").chosen({disable_search_threshold: 10});
$(".takesCallsEndSuffix").chosen({disable_search_threshold: 10});
*/
updateStateOrProvinceList("", index-1, "");
$("[name=stateOrProvince]:last").chosen({width: '100%'});
$(".chosen-container.chosen-container-single").on("focusout", function() {
$(this).parent().find(".takesCallsStart").blur();
$(this).parent().find(".takesCallsEnd").blur();
$(this).parent().find(".takesCallsStartSuffix").blur();
$(this).parent().find(".takesCallsEndSuffix").blur();
$(this).parent().find("[name=stateOrProvince]").blur();
});
});
相关 HTML 的开头和相关部分 - 在最后一个单选按钮上选择"is"会创建其上方模板的新副本:
<div id="BusinessBox" class="accordion_in">
<div class="acc_head">Business & Licensing
<div id="businessStatus" class="tabStatus"></div>
</div>
<div class="acc_content">
<div class="main_form_sec">
<div class="main_formInr">
<h3>Business and Licensing</h3>
<h6><span>*</span> Required Information</h6>
<div name="otherOffice">
<h5>Office and Contact Information</h5>
<div class="form_row">
<label>Primary Practice Company Name or DBA</label>
<ul class="form_colom_list">
<li>
<input name="companyName" placeholder="Your practice name here" type="text" class="big"/>
</li>
</ul>
</div>
<div class="form_row">
<ul class="form_colom_list">
<li>
<label><span>*</span>Primary Office Street Address (Line 1)</label><input name="officeAddressLine1" id='officeAddressLine1' type="text" class="big_sml"/>
</li>
<li>
<label>Primary Office Street Address (Line 2) (Optional)</label><input name="officeAddressLine2" type="text" class="big_sml"/>
</li>
</ul>
</div>
<div class="form_row">
<ul class="form_colom_list">
<li>
<label><span>*</span>City</label><input id="city" name="city" type="text">
</li>
<li>
<label><span>*</span>State/Territory/Province</label>
<select name="stateOrProvince" id="stateOrProvince" class="select_list big selectBox">
<option>select</option>
<option>select</option>
<option>select</option>
</select>
</li>
<li>
<label><span>*</span>Zip/Postal Code</label><input id="zip" name="zip" class="sml" type="text">
</li>
</ul>
</div>
<div class="form_row">
<ul class="form_colom_list2">
<li>
<input id="weelChairAccessible1" name="weelChairAccessible" type="checkbox" value="weelChairAccessible" name="chk">
<label for="weelChairAccessible1">Office is wheelchair accessible (optional)</label>
</li>
<li>
<input id="twoBlocksFromPublicTransport1" name="twoBlocksFromPublicTransport" type="checkbox" value="twoBlocksFromPublicTransport" name="chk">
<label for="twoBlocksFromPublicTransport1">Office is within 2 blocks of public transportation (optional)</label>
</li>
</ul>
</div>
<div class="form_row">
<ul class="form_colom_list2">
<li>
<label class="line_height"> <span>*</span> Office Phone (Please entet the data with no punctuation)</label>
</li>
<li>
<input name="officePhone" id="officePhone" placeholder="(NPA) NXX-XXXX" type="text">
</li>
</ul>
</div>
<div class="form_row">
<ul class="form_colom_list2">
<li>
<label class="line_height"> <span>*</span> My office takes calls between:</label>
</li>
<li>
<select name="takesCallsStart" class="select_list selectBox takesCallsStart" data-hasqtip="686">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>
<input id="takesCallsStartSuffix1"type="checkbox" value="AM" data-id="1" name="takesCallsStartSuffix" checked>
</li>
<li>
<label class="line_height">and</label>
</li>
<li>
<select name="takesCallsEnd" class="select_list selectBox takesCallsEnd" data-hasqtip="688">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>
<input id="takesCallsEndSuffix1" data-id="1" type="checkbox" name="takesCallsEndSuffix" checked>
</li>
</ul>
</div>
<div class="form_row">
<ul class="form_colom_list2">
<li>
<label class="line_height"> Fax (Please enter the data with no punctuation)</label>
</li>
<li>
<input id="fax" name="fax" placeholder="(NPA) NXX-XXXX" maxlength="14" type="text">
</li>
</ul>
</div>
<div class="form_row">
<ul class="form_colom_list2">
<li>
<label class="line_height"> Alternate Office Phone (Please enter the data with no punctuation)</label>
</li>
<li>
<input id="altOfficePhone" name="altOfficePhone" maxlength="14" placeholder="(NPA) NXX-XXXX" type="text">
</li>
</ul>
</div>
<div class="form_row">
<ul class="form_colom_list">
<li>
<label for="businessEmail"><span>*</span>Business Email Address</label><input name="businessEmail" id='businessEmail' class='businessEmail' type="text" class="big_sml" />
</li>
</ul>
</div>
<div class="form_row">
<label><span>*</span>Client emails are responded to by:</label>
</div>
<div class="form_row">
<ul class="form_colom_list2">
<li>
<input id="emailProcessedByMe" name="emailProcessedByMe" type="checkbox" value="emailProcessedByMe" checked>
<label for="emailProcessedByMe">Me personally</label>
</li>
<li>
<input id="emailProcessedByStaff1" name="emailProcessedByStaff" type="checkbox" value="emailProcessedByStaff">
<label for="emailProcessedByStaff1">My staff</label>
</li>
</ul>
</div>
<div class="form_row">
<ul class="form_colom_list2">
<li>
<label class="line_height"> <span>*</span> Number of busines days emails are responded to:</label>
</li>
<li>
<select name = 'emailRespondedBy' class="select_list selectBox">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</li>
</ul>
</div>
<div class="form_row">
<ul class="redioButtons otherOffices form_colom_list2">
<li>
<label> Do you have offices in other locations?</label>
</li>
<li>
<input id="otherOfficeRadioYes1" type="radio" name="otherOfficeRadio1" class="css-checkbox" value="y">
<label for="otherOfficeRadioYes1">Yes</label>
</li>
<li>
<input type="radio" id="otherOfficeRadioNo1" name="otherOfficeRadio1" class="css-checkbox" value="n">
<label for="otherOfficeRadioNo1">No</label>
</li>
</ul>
</div>
</div>
最佳答案
我发现不能使用 jQuery 的 replaceWith()
方法进行递归替换。一旦索引 1 的元素被替换,replaceWith()
方法就没有任何可匹配的内容(原始元素已被替换),因此迭代器运行一次,更改所有值,然后停止。
关于javascript - jQuery concat 变量输入名称未更新,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34302656/
这个问题在这里已经有了答案: 关闭 10 年前。 Possible Duplicate: How to nest OR statements in JavaScript? 有没有办法做到这一点:
在 JavaScript 中有没有办法让一个变量总是等于一个变量?喜欢var1 = var2但是当var2更新,也是var1 . 例子 var var1 = document.getElementBy
我正在努力理解这代表什么 var1 = var2 == var3 我的猜测是这等同于: if (var2 == var3): var1 = var2 最佳答案 赋值 var1 = var2
这个问题已经有答案了: What does the PHP error message "Notice: Use of undefined constant" mean? (2 个回答) 已关闭 8
我在临时表中有几条记录,我想从每条记录中获取一个值并将其添加到一个变量中,例如 color | caption -------------------------------- re
如何将字符串转为变量(字符串变量--> $variable)? 或者用逗号分隔的变量列表然后转换为实际变量。 我有 2 个文件: 列名文件 行文件 我需要根据字符串匹配行文件中的整行,并根据列名文件命
我有一个我无法解决的基本 php 问题,我也想了解为什么! $upperValueCB = 10; $passNodeMatrixSource = 'CB'; $topValue= '$uppe
这可能吗? php $variable = $variable1 || $variable2? 如果 $variable1 为空则使用 $variable2 是否存在类似的东西? 最佳答案 PHP 5
在 Perl 5.20 中,for 循环似乎能够修改模块作用域的变量,但不能修改父作用域中的词法变量。 #!/usr/bin/env perl use strict; use warnings; ou
为什么这不起作用: var variable; variable = variable.concat(variable2); $('#lunk').append(variable) 我无法弄清楚这一点
根据我的理解,在32位机器上,指针的sizeof是32位(4字节),而在64位机器上,它是8字节。无论它们指向什么数据类型,它们都有固定的大小。我的计算机在 64 位上运行,但是当我打印包含 * 的大
例如: int a = 10; a += 1.5; 这运行得很完美,但是 a = a+1.5; 此作业表示类型不匹配:无法从 double 转换为 int。所以我的问题是:+= 运算符 和= 运算符
您好,我写了这个 MySQL 存储过程,但我一直收到这个语法错误 #1064 - You have an error in your SQL syntax; check the manual that
我试图在我的场景中显示特定的奖牌,这取决于你的高分是基于关卡的目标。 // Get Medal Colour if levelHighscore goalScore { sc
我必须维护相当古老的 Visual C++ 源代码的大型代码库。我发现代码如下: bIsOk = !!m_ptr->isOpen(some Parameters) bIsOk的数据类型是bool,is
我有一个从 MySQL 数据库中提取的动态产品列表。在 list 上有一个立即联系 按钮,我正在使用一个 jquery Modal 脚本,它会弹出一个表单。 我的问题是尝试将产品信息变量传递给该弹出窗
这个问题在这里已经有了答案: 关闭 10 年前。 Possible Duplicate: What is the difference between (type)value and type(va
jQuery Core Style Guidelines建议两种不同的方法来检查变量是否已定义。 全局变量:typeof variable === "undefined" 局部变量:variable
这个问题已经有答案了: 已关闭11 年前。 Possible Duplicate: “Variable” Variables in Javascript? 我想肯定有一种方法可以在 JavaScrip
在语句中使用多重赋值有什么优点或缺点吗?在简单的例子中 var1 = var2 = true; 赋值是从右到左的(我相信 C# 中的所有赋值都是如此,而且可能是 Java,尽管我没有检查后者)。但是,
我是一名优秀的程序员,十分优秀!