我正在尝试构建类似 WordPress 选项的东西,用于在创建文章时切换字段可见性。我所构建的依赖于$.click
函数使用相应的字段名称切换父项,我想知道如果选中该复选框,执行此操作的最佳方法是什么,因为如果您选中一个框并重新加载页面,因为它是一个点击,我的代码将会混乱如果确实选中该框则不会。提前致谢!
http://jsfiddle.net/zgrRd/1/ http://jsfiddle.net/zgrRd/1/
HTML
<input type="checkbox" name="title">
<span class="caption">Title</span>
<div class="hidden">
<h2>Title</h2>
<input type="text" name="title">
<span class="caption">Lorem</span>
</div>
jQuery
$('input[type="checkbox"]').click(function(){
var item = $(this).attr('name');
$('input[name="'+item+'"][type="text"]').parent().toggle();
});
假设您从外部控制复选框的选中状态......
Demo: http://jsfiddle.net/zgrRd/5/ http://jsfiddle.net/zgrRd/5/
换句话说,无论复选框处于什么状态,都将在页面加载时进行评估,因此如果未选中某个框,则相应的元素将开始隐藏。因此,如果您在服务器端设置一个选中该框的值,则此客户端 JavaScript 应该正确评估它。
JavaScript
function evaluate(){
var item = $(this);
var relatedItem = $("#" + item.attr("data-related-item")).parent();
if(item.is(":checked")){
relatedItem.fadeIn();
}else{
relatedItem.fadeOut();
}
}
$('input[type="checkbox"]').click(evaluate).each(evaluate);
HTML
<input type="checkbox" data-related-item="title1">
<span class="caption">Title</span>
<div class="hidden">
<h2>Title</h2>
<input type="text" id="title1">
<span class="caption">Lorem</span>
</div>
<hr>
<input type="checkbox" data-related-item="title2" checked>
<span class="caption">Title</span>
<div class="hidden">
<h2>Title</h2>
<input type="text" id="title2">
<span class="caption">Lorem</span>
</div>
注意我的使用data-*
属性。这避免了使用name
一个字段的属性指示与另一字段的关系。您可以合法地为这些属性命名任何您想要的名称,只要它们带有前缀即可data-
.
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)