简化jquery/javascript的复选框链接
我已经写了几个简单的代码行,允许在单击时将边框导航中的复选框发送到指定的链接。复选框用作过滤器。
这里是复选框的HTML:创建交互简化jquery/javascript的复选框链接
<li class="inactive" aria-selected="false">
<input id="path1" type="checkbox" value="Accessories">
<a href="href">Accessories</a>
</li>
而jQuery的/ JavaScript的:
$('#path1').click(function(){
window.location='href'; //href would be a unique link
});
问题没有得到这种互动的工作,我有一个逻辑问题。它的编写方式是针对复选框的ID。它不可扩展。 8个链接并不那么糟糕,但500个链接,每一个独特,你明白了。
是否有解决方案针对每个复选框,但允许每个复选框的唯一链接?即瞄准一流,使所有的复选框都具有相同的HREF,所以这是不是一种选择,等
你可以做到以下几点:
<input type="checkbox" data-custom-click="href">
,因为你需要将上面的代码可以重复多次,让你有尽可能多的数量复选框,只要你想。
注意href
在上面的HTML代表您的特定复选框的链接。
而一个衬垫的JavaScript:
$("input[data-custom-click]").click(function(){
window.location=$(this).attr("data-custom-click");
});
的选择input[data-custom-click]
将选择所有的自定义行为复选框和$(this)
选择点击复选框。
这看起来不错。我会测试,但它很有意义,它很可能会工作。 –
你能提供你的代码的js小提琴,以便我可以从那里调试它吗? –
这解决了我的问题。谢谢!第一次处理DRY这帮助我进一步发展。 –
假设你href
价值来自于跟随输入的链接,您可以使用:
$('li.inactive input[type="checkbox"]').click(function(){
window.location = $(this).next('a').attr('href')
});
我把我的href放在错误的地方了吗?你是说我需要把它放在其他地方,并用你提供的代码来定位它? –
从哪里'href'会来? –
'$(“input [type ='checkbox]'”)。click(....)'另外,这与“缩小”有什么关系,它将代码重构为将其缩小为最小量字节? –
'href'是链接的替身。所以点击时它可能是'/ products/valves /'之类的东西,但是有很多复选框,每个复选框都会到不同的地方,我认为它会使示例使用实际的链接。 –