- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
更新
我已使用 Igor's Answer 中的一些提示将类型集成到成员(member)注册中。并搜索 stackoverflow。它无法按预期工作,因为除了第一个成员类型 select
之外,其他成员类型 select
元素不会触发 registrationTypeChange 函数。因此,第一个成员的类型工作正常,而其他成员的类型没有按预期显示。
注意:第一个成员的选择在 Chrome 和 IE 中按预期工作,但在 Firefox 中不起作用
屏幕截图
正如您所看到的,当第二个成员的类型更改为“句点”时,相关元素不会显示,它应该与第一个成员类似,因为两者都是“句点”类型。我已经检查了用于查找 id 中的数字的正则表达式,它工作正常( Fiddle )。我猜想错误可能出在函数registrationTypeChange上。有人可以帮助我修复代码以使其在所有浏览器中按预期工作吗?
<强> Fiddle
HTML
<div class="row">
<fieldset class="frame-border">
<legend class="frame-border">Members Registration</legend>
<div class="alert alert-warning alert-dismissible" role="alert" id="memberMinAlert">
<button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">×</span><span class="sr-only">Close</span>
</button>Minimum one member is required.</div>
<div class="row">
<div class="form-group-sm required">
<label class="col-xs-2 col-md-2"></label>
<label class="control-label col-xs-2 col-md-3">Name</label>
<label class="control-label col-xs-2 col-md-2">Type</label>
</div>
<div class="form-group-sm">
<label class="control-label col-xs-2 col-md-2">1st Parameter</label>
<label class="control-label col-xs-2 col-md-2">2nd Parameter</label>
</div>
<div class="col-xs-2 col-md-1"> <span class="glyphicon glyphicon-plus-sign big" id="memberAdd" data-toggle="popover" data-placement="right" title="Click to add a member."></span>
<span class="glyphicon glyphicon-minus-sign big" id="memberRemove" data-toggle="popover" data-placement="right" title="Click to remove a member."></span>
</div>
</div>
<div class="member-template">
<div class="row">
<div class="form-group-sm required">
<label class="control-label col-xs-2 col-md-2" id="registrationMemberLabel">Member</label>
<div class="col-xs-2 col-md-3"> <span class="help glyphicon glyphicon-info-sign" data-toggle="popover" data-placement="right" title="Name of the member."></span>
<input type="text" id="registrationMemberName" class="form-control" placeholder="Enter Name">
</div>
<div class="col-xs-2 col-md-2"> <span class="help glyphicon glyphicon-info-sign" data-toggle="popover" data-placement="right" title="Type of the membership."></span>
<select id="registrationMemberType" class="type-selector form-control">
<option value="yearly" selected="selected">Yearly</option>
<option value="period">Period</option>
</select>
</div>
<div class="col-xs-2 col-md-2"> <span class="help glyphicon glyphicon-info-sign" id="registrationMemberParam1Help" data-toggle="popover" data-placement="right" title="Help"></span>
<input type="number" id="registrationMemberParam1" name="registrationMemberParam1" class="form-control" min="2014" max="3000" step="1" placeholder="Name">
</div>
<div class="col-xs-2 col-md-2"> <span class="help glyphicon glyphicon-info-sign" id="registrationMemberParam2Help" data-toggle="popover" data-placement="right" title="Help"></span>
<input type="number" id="registrationMemberParam2" name="registrationMemberParam2" class="form-control" min="2015" max="3000" step="1 " placeholder="Name">
</div>
</div>
</div>
</div>
<div id="memberContainer"></div>
</fieldset>
</div>
JavaScript
function registrationTypeChange(memberNum) {
var theValue = $('#registrationMember' + memberNum + 'Type').find("option:selected").text();
if (theValue === "Yearly") {
$('#registrationMember' + memberNum + 'Param1Help').attr("title", "Please provide the year of membership");
$('#registrationMember' + memberNum + 'Param1').attr("placeholder", "Year");
$('#registrationMember' + memberNum + 'Param2').hide();
$('#registrationMember' + memberNum + 'Param2Help').hide();
} else if (theValue === "Period") {
$('#registrationMember' + memberNum + 'Param1Help').attr("title", "Please provide the starting year of membership");
$('#registrationMember' + memberNum + 'Param1').attr("placeholder", "From");
$('#registrationMember' + memberNum + 'Param2Help').attr("title", "Please provide the ending year of membership");
$('#registrationMember' + memberNum + 'Param2').attr("placeholder", "To");
$('#registrationMember' + memberNum + 'Param2').show();
$('#registrationMember' + memberNum + 'Param2Help').show();
}
}
function addMember() {
var memberNum = $('.member').length + 1;
var $html = $('.member-template').clone();
$html.find('[id=registrationMemberLabel]').html("Member" + memberNum);
$html.find('[id=registrationMemberLabel]').attr("id", "registrationMember" + memberNum + "Label");
$html.find('[id=registrationMemberName]').attr("id", "registrationMember" + memberNum + "Name");
$html.find('[id=registrationMemberType]').attr("id", "registrationMember" + memberNum + "Type");
$html.find('[id=registrationMemberParam1]').attr("id", "registrationMember" + memberNum + "Param1");
$html.find('[id=registrationMemberParam1Help]').attr("id", "registrationMember" + memberNum + "Param1Help");
$html.find('[id=registrationMemberParam2]').attr("id", "registrationMember" + memberNum + "Param2");
$html.find('[id=registrationMemberParam2Help]').attr("id", "registrationMember" + memberNum + "Param2Help");
return $html.html();
}
function removeMember() {
var memberNum = $('.member').length;
if (memberNum > 1) {
document.getElementById("registrationMember" + memberNum).remove();
} else {
$("#memberMinAlert").alert();
$("#memberMinAlert").fadeTo(2000, 500).slideUp(500, function () {
$("#memberMinAlert").alert('close');
});
}
}
function addMemberHTML() {
$('<div/>', {
'class': 'member',
'id': 'registrationMember' + ($('.member').length + 1),
html: addMember()
}).appendTo('#memberContainer');
registrationTypeChange($('.member').length);
}
$(function () {
addMemberHTML();
registrationTypeChange(1);
$("#memberMinAlert").hide();
$('#memberAdd').click(function () {
addMemberHTML();
});
$('#memberRemove').click(function () {
removeMember();
});
$(".type-selector").change(function () {
var re = /(?:\d+)/;
var num = event.target.id.match(re);
registrationTypeChange(num);
});
});
<小时/>
我需要在动态元素集中动态管理表单元素。例如,我有一个成员(member)表单,它通过单击图标动态管理输入(添加、删除和更改属性)。(加号用于添加,减号用于删除),它是基于 this 设计的。发布。
成员(member)注册中的类型选择
通过更改选项动态管理一些元素(显示、隐藏和更改属性)。
HTML
<div class="row">
<fieldset class="frame-border">
<legend class="frame-border">Type</legend>
<div class="row">
<div class="form-group-sm required">
<label class="control-label col-xs-4 col-md-4">Type</label>
<label class="col-xs-4 col-md-4">1st Parameter</label>
<label class="col-xs-4 col-md-4">2nd Parameter</label>
</div>
</div>
<div class="row">
<div class="form-group-sm required">
<div class="col-xs-4 col-md-4">
<span class="help glyphicon glyphicon-info-sign" data-toggle="popover" data-placement="right" title="Type of Membership."></span>
<select id="registrationMemberTypeSample" class="form-control" >
<option value="yearly" selected="selected">Yearly</option>
<option value="period">Period</option>
</select>
</div>
<div class="col-xs-4 col-md-4">
<span class="help glyphicon glyphicon-info-sign" id="registrationMemberParam1Help" data-toggle="popover" data-placement="right" title="Help"></span>
<input type="number" id="registrationMemberParam1" name="registrationMemberParam1" class="form-control" min="2014" max="3000" step="1" placeholder="Name">
</div>
<div class="col-xs-4 col-md-4">
<span class="help glyphicon glyphicon-info-sign" id="registrationMemberParam2Help" data-toggle="popover" data-placement="right" title="Help"></span>
<input type="number" id="registrationMemberParam2" name="registrationMemberParam2" class="form-control" min="2015" max="3000" step="1 "placeholder="Name">
</div>
</div>
</div>
</fieldset>
</div>
<div class="row">
<fieldset class="frame-border">
<legend class="frame-border">Members Registration</legend>
<div class="alert alert-warning alert-dismissible" role="alert" id="memberMinAlert">
<button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
Minimum one member is required.
</div>
<div class="row">
<div class="form-group-sm required">
<label class="col-xs-3 col-md-3"> </label>
<label class="control-label col-xs-4 col-md-4">Name</label>
<label class="control-label col-xs-3 col-md-3">Type</label>
</div>
<div class="col-xs-2 col-md-2">
<span class="glyphicon glyphicon-plus-sign big" id="memberAdd" data-toggle="popover" data-placement="right" title="Click to add a member."></span>
<span class="glyphicon glyphicon-minus-sign big" id="memberRemove" data-toggle="popover" data-placement="right" title="Click to remove a member."></span>
</div>
</div>
<div class="member-template">
<div class="row">
<div class="form-group-sm required">
<label class="control-label col-xs-3 col-md-3" id="registrationMemberLabel">Member</label>
<div class="col-xs-4 col-md-4">
<span class="help glyphicon glyphicon-info-sign" data-toggle="popover" data-placement="right" title="Name of the member."></span>
<input type="text" id="registrationMemberName" class="form-control" placeholder="Enter Name">
</div>
<div class="col-xs-3 col-md-3">
<span class="help glyphicon glyphicon-info-sign" data-toggle="popover" data-placement="right" title="Type of the membership."></span>
<select id="registrationMemberType" class="form-control" >
<option value="yearly" selected="selected">Yearly</option>
<option value="period">Period</option>
</select>
</div>
</div>
</div>
</div>
<div id="memberContainer"></div>
</fieldset>
</div>
JavaScript
function registrationTypeChange() {
var theValue = $("#registrationMemberTypeSample").find("option:selected").text();
if(theValue === "Yearly" )
{
$('#registrationMemberParam1Help').attr("title","Please provide the year of membership");
$('#registrationMemberParam1').attr("placeholder","Year");
$('#registrationMemberParam2').hide();
$('#registrationMemberParam2Label').hide();
$('#registrationMemberParam2Help').hide();
}
else if(theValue === "Period" )
{
$('#registrationMemberParam1Help').attr("title","Please provide the starting year of membership");
$('#registrationMemberParam1').attr("placeholder","From");
$('#registrationMemberParam2Help').attr("title","Please provide the ending year of membership");
$('#registrationMemberParam2').attr("placeholder","To");
$('#registrationMemberParam2').show();
$('#registrationMemberParam2Help').show();
$('#registrationMemberParam2Label').show();
}
}
function addMember() {
var memberNum = $('.member').length+1;
var $html = $('.member-template').clone();
$html.find('[id=registrationMemberLabel]').html("Member" + memberNum);
$html.find('[id=registrationMemberLabel]').attr("id", "registrationMember" + memberNum + "Label");
$html.find('[id=registrationMemberName]').attr("id", "registrationMember" + memberNum + "Name");
$html.find('[id=registrationMemberType]').attr("id", "registrationMember" + memberNum + "Type");
return $html.html();
}
function removeMember() {
var memberNum = $('.member').length;
if(memberNum > 1 ) {
document.getElementById("registrationMember" + memberNum).remove();
}
else {
$("#memberMinAlert").alert();
$("#memberMinAlert").fadeTo(2000, 500).slideUp(500, function(){
$("#memberMinAlert").alert('close');
});
}
}
function addMemberHTML(){
$('<div/>', {
'class' : 'member', 'id' :'registrationMember'+($('.member').length+1), html: addMember()
}).appendTo('#memberContainer');
}
$(function () {
registrationTypeChange();
addMemberHTML();
$("#memberMinAlert").hide();
$('#memberAdd').click(function () {
addMemberHTML();
});
$('#memberRemove').click(function () {
removeMember();
});
$("#registrationMemberTypeSample").change(function() {
registrationTypeChange();
});
});
<强> JS Fiddle
现在我需要帮助将类型集成到所有成员行的成员注册中。我不知道要如何实现这一目标。谁能指导我如何做到这一点?
最佳答案
指南:
registrationTypeChange()
可以很好地管理某些字段。<select class="type-selector" >
您依赖于该类 on()
方法,例如:
('.type_selector').on('change', function{... 做一些事情来更改其他输入})。
此函数内部 function{... do stuff to change other parameters })
this
(或 $(this)
)应引用用户现在更改的特定类型选择器(有关更多信息,请参阅文档)。所以你用 jquery 追踪它的 sibling / parent ,例如:$(this).siblings(<selector optional>)
因此能够仅在该给定行中更改/添加其他参数设置。
随时询问是否有问题。不清楚。
对于第 4 点:
您的模板:
<div class="member-template">
<div class="row">
<div class="form-group-sm required">
<label class="control-label col-xs-3 col-md-3" id="registrationMemberLabel">Member</label>
<div class="col-xs-4 col-md-4">
<span class="help glyphicon glyphicon-info-sign" data-toggle="popover" data-placement="right" title="Name of the member."></span>
<input type="text" id="registrationMemberName" class="form-control" placeholder="Enter Name">
</div>
<div class="col-xs-3 col-md-3">
<span class="help glyphicon glyphicon-info-sign" data-toggle="popover" data-placement="right" title="Type of the membership."></span>
<select id="registrationMemberType" class="form-control" >
<option value="yearly" selected="selected">Yearly</option>
<option value="period">Period</option>
</select>
</div>
</div>
</div>
</div>
$(this).parent('span')
将保存选择元素的父范围( <span class="help glyphicon glyphicon-info-sign" data-toggle="popover" data-placement="right" title="Type of the membership."></span>
)$(this).parents('.row')
将为所有家长带课row
,在我们的例子中,它是该行中的顶部父级;请参阅parents() of jquery $(this).parents('.row').children('input')
将举行input
元素。请参阅children() of jquery 。顺便说一下,输入的 id 应该是唯一的,因为会有多个这样的行。我没有测试它,所以你做了一些小步骤,并使用 console.log() 或 console.dir() 选定的元素。
这里是您在类型选择器更改时调用registrationTypeChange()的地方:
$(".type-selector").change(function () {
var re = /(?:\d+)/;
var num = event.target.id.match(re);
registrationTypeChange(num);
});
因为这些type selectors
是动态的:
it doesn't work because it wasn't originally included in the page initialization.
因此,您需要通过jquery on()来铰接它们的功能方法:
Attach an event handler for all elements which match the current selector, now and in the future.
参见my answer's update section对于这种情况。
试试这个:
$(".type-selector").on('change', function () {
var re = /(?:\d+)/;
var num = event.target.id.match(re);
registrationTypeChange(num);
});
从此answer它指出这 on
方法需要一个选择器参数
otherwise the event is directly bound instead of delegated, which only works if the element already exists (so it doesn't work for dynamically loaded content)
所以绑定(bind)的代码应该是
JQuery(document).on('change', ".type-selector" ,function () {
...
});
关于javascript - 使用 jQuery 切换 DOM 元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27551345/
关闭。这个问题是opinion-based .它目前不接受答案。 想要改进这个问题? 更新问题,以便 editing this post 可以用事实和引用来回答它. 关闭 6 年前。 Improve
Polymer的light DOM和local DOM有什么区别?来自文档(1): The DOM that an element creates and manages is called its
当内容添加到网页时,我需要触发一个 Action 。更新可能具有不同的性质(例如 AJAX、延迟脚本、用户操作)并且不受我的控制。 我想使用 DOM 突变事件,但它们并非在所有浏览器中都可用。是否有为
我刚遇到一个有趣的情况,我有一个提交 放置在 内的 native 自定义元素的 Shadow DOM 内. Select #shadow-root ...
假设有一个滚动列表,当我插入一些新的 DOM 附加到当前 dom 时,它工作正常。上拉 但是如果我之前插入一些新的 DOM,新的 DOM 将在视口(viewport)中,而旧的 DOM 将被下推。下拉
在我的项目中实现 Shadow DOM 是否会使它们像 React 使用的虚拟 DOM 一样更快? 最佳答案 它们是不同用途的不同事物,因此比较性能没有意义。 虚拟 DOM 虚拟 DOM 旨在避免对
在我的页面内容上,我将多张卡片组织成网格 __________________ | ____ ____ | | | | | | | | | | | |
是否可以在浏览器中看到(调试)从 DOM 元素触发的自定义事件? 假设我想查看 Bootstrap Collapse 的哪个特定元素触发了 show.bs.collapse event ,我能以某种方
我正在生成用于客户端的 XPaths 服务器端,我很困惑为什么在 DOM 中找不到表路径(即 td 中的内容)。 事实证明,现代浏览器(至少是 Chrome 和 Firefox)插入了 tbody在文
是否可以检索文本节点的几何位置(即从父元素、页面等的顶部/左侧偏移量)? 最佳答案 不是直接的。 TextNode 没有用于测量视口(viewport)定位的原始 IE 偏移*(和类似的)扩展。 仅在
以下语句中的 DOM 元素的含义是什么? Statement #1 You can add multiple classes to a single DOM element. Statement #2
有没有办法让 firebug(或任何其他浏览器,或使用任何其他工具)阻止任何 dom 操作的发生?有时布局调试充满悬停事件的屏幕是不可能的,因为元素可能会消失,并且您看不到它们的复合布局。 最佳答案
我需要在html文档中搜索 text here 然后输出完整的节点路径(CSS或XPATH) 例如 html > body > div class ="something" > table > tr
这是我的一个页面的典型加载时间如何拆分为:- Domain Lookup 0 0 % Connect 134 .3% Request
我的 .on() 工作时遇到一些问题。我的网站是here . 如果你看看 www.eliteweb-creation.co.uk/dev/js/nav.js,我正在 mouseenter 和 mous
我是 Javascript 的新手,负责将我们产品的 UI 从 YUI2 迁移到 YUI3。看起来哪里都没有迁移指南,所以我现在正在浏览互联网帖子和 yui 文档。 在我的全局范围内,我临时添加了类似
我想和实习生一起测试一些 DOM 相关的东西,不需要特定的固定装置,只是一般的 DOM 东西,比如我改变了 Element.prototype。这是否需要通过本地 Selenium 服务器(或 sau
我是 HTML 和 HTML5 的初学者。 当我阅读以下内容时 link ,我找到了术语 DOM 和 DOM API。我通读了维基百科,但无法理解其背后的全部思想。 谁能给我解释一下: 文档对象模型
我有两个主要问题。 Object 之类的扩展是否算数? 什么是 DOM 包装? http://perfectionkills.com/whats-wrong-with-extending-the-do
对不起查询,原型(prototype),雅虎 YUI,道场在考虑小的时候不吸引我。我想要一个模块化的库,代码尽可能小,最多 20Kb [un compressed] 是我所期望的。应该提供 Dom 操
我是一名优秀的程序员,十分优秀!