javascript - 简化复选框链接的 jquery/javascript

Question

我编写了几行简单的代码，这些代码允许在单击时在侧边栏导航中显示复选框以将用户发送到指定的链接。复选框起到过滤器的作用。
这是复选框的 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，因此这不是一个选项，等等。

Answer 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)选择单击的复选框。