为复选框链接简化 jquery / javascript答案

【问题标题】：Simplifying jquery / javascript for checkbox links为复选框链接简化 jquery / javascript
【发布时间】：2017-10-17 17:06:18
【问题描述】：

我编写了几行简单的代码，当单击时允许在侧边栏导航中选择复选框以将用户发送到指定链接。复选框用作过滤器。
这是复选框的 HTML：

<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 个链接，每个链接都是独一无二的，你明白了。

是否有针对每个复选框但允许为每个复选框设置唯一链接的解决方案？ IE。定位该类使所有复选框都具有相同的href，因此这不是一个选项，等等。

【问题讨论】：

'href' 会从哪里来？
$("input[type='checkbox]'").click(....) 另外，这与“缩小”有什么关系，即重构代码以将其压缩到最小的字节数？
'href' 是链接的替代。因此，单击时可能类似于“/products/valves/”，但是有许多复选框，每个复选框都指向不同的位置，我认为使用实际链接会破坏示例。
也许缩小是错误的术语。不过我认为这是正确的，因为目标是将 50 个几乎相同的代码块减少到单个块的大约 5 或 6 行，希望如此。
这很干（不要重复自己）。缩小是另一回事。

【解决方案1】：

您可以执行以下操作：

<input type="checkbox" data-custom-click="href">

上面的代码可以根据需要重复多次，并且可以让您拥有任意数量的复选框。

上述 HTML 中的注释 href 表示您针对该特定复选框的链接。

以及单行 JavaScript：

$("input[data-custom-click]").click(function (){
    window.location=$(this).attr("data-custom-click");
});

选择器input[data-custom-click] 将选择您所有的自定义行为复选框，$(this) 选择被点击的复选框。

【讨论】：

这看起来不错。我会测试，但它很可能会起作用。
你能提供一个你的代码的 js fiddle 以便我可以从那里调试它吗？
这解决了我的问题。谢谢！第一次与 DRY 打交道，这对我前进有很大帮助。
是我的错，没有使用准备好的文档正确激活代码。
@TrevorJones 太好了！它解决了您的问题并简化了 HTML。如果您在网络方面需要任何其他帮助（支持 php/WordPress），我很乐意为您提供帮助 ?

【解决方案2】：

假设您的 href 值来自您可以使用的输入后面的链接：

$('li.inactive input[type="checkbox"]').click(function(){ 
    window.location = $(this).next('a').attr('href')
});

【讨论】：