无线电隐藏。改为显示 div 类。单击 div 选择链接的收音机
Posted
技术标签:
【中文标题】无线电隐藏。改为显示 div 类。单击 div 选择链接的收音机【英文标题】:radio hide. show div class instead. on click of div select linked radio 【发布时间】:2013-02-27 09:38:55 【问题描述】:试图让这个工作。而不是显示普通收音机,或用图像替换收音机。我想用一个 div 替换它,我可以装扮成一个按钮,悬停类更改并单击类更改。而且点击隐藏的收音机也被选中。但还要求标签(标签参考显示的文本,例如如下所示 .co.uk .com .net 等)位于 div/按钮内。或者能够将文本添加到 div 按钮。这可能吗?
$(function()
$("input [name='domain_ext']").each(function()
if ($(this).prop('checked'))
$(this).hide();
$(this).after($("< class='radioButtonOff' />"));
else
$(this).hide();
$(this).after($("<class='radioButtonOn' />"));
);
$("input.radio").click(function()
if($(this).attr('src') == 'radiobuttonOn')
$(this).attr('src', 'radiobuttonOff');
$(this).prev().attr('checked', 'false');
else // its not checked, so check it
$(this).attr('src', 'radioButtonOn');
$(this).prev().attr('checked', 'true');
);
);
<table class="domain_ext_ribbon">
<tr>
<td><label>
<input type="radio" name="domain_ext" value="all" />
All</label></td>
<td><label>
<input type="radio" name="domain_ext" value=".co.uk" />
.co.uk</label></td>
<td><label>
<input type="radio" name="domain_ext" value=".com" />
.com</label></td>
</tr>
<tr>
<td><label>
<input type="radio" name="domain_ext" value=".net" />
.net</label></td>
<td><label>
<input type="radio" name="domain_ext" value=".org" />
.net</label></td>
<td><label>
<input type="radio" name="domain_ext" value=".biz" />
.net</label></td>
</tr>
</table>
css
.radioButtonOff width: 60px; height: 20px; background: #000000;
.radioButtonHover width: 60px; height: 20px; background: #666666;
.radioButtonOn width: 60px; height: 20px; background: #999999;
【问题讨论】:
请不要在回答者指出代码错误后编辑它们。 您正在应用基于类的 if/else 语句,但在 if else 语句之后才应用类。 试图插入一个 div 来替换默认的单选按钮。<class='radioButtonOn' />
不是 div。这……嗯……不过是格式错误的代码。
true 我还没有实现标记。它应该插入 标签 ???
【参考方案1】:
您的选择器中似乎有错误;您缺少属性过滤器周围的左大括号。所以
$("input name='domain_ext']")
应该是
$("input [name='domain_ext']")
此外,除非您专门使用 jQuery 1.6 版,否则您的代码应该可以工作,但是,
if ($(this).prop('checked'))
是检查单选按钮是否被选中的首选方法,而不是
if ($(this).attr('checked'))
更多信息请参见this link。
当然还有这个
$(this).after($("<class='radioButtonOn' />"));
根本没有多大意义。我想你的意思是:
$(this).after($("<div class='radioButtonOff' />"));
【讨论】:
谢谢 ;) 认为我需要为悬停状态添加模糊功能,而不是在 css 中将其作为悬停? 是的,开始认为这就是问题所在。试图让 div 充当按钮来替换默认收音机。并将文本放入 div 按钮。 仍然没有看到如何将它们组合在一起。有点棘手以上是关于无线电隐藏。改为显示 div 类。单击 div 选择链接的收音机的主要内容,如果未能解决你的问题,请参考以下文章