Question

我正在尝试将下拉列表作为页面上的过滤器。我已经创建了表单，并且锚点在那里，当您单击下拉项目时，没有任何事情发生。如何触发链接到锚点？

这是我使用的jQuery：

<script>
$("#portfolio-list").bind("change", function() {
    $("#" + this.value).show();
    $("p:not(#" + this.value + ")").hide();
});</script>

这是我的表格：

<form name="dropdown" size="1" id="portfolio-list">
<select name="portfolio-list" id="portfolio-list">
<option value="#" rel="all" class="current">All</option> 
<option value="#custom-exhibits" rel=custom-exhibits class=custom-exhibits>Custom Exhibits</option>
<option value="#permanent-installation" rel=permanent-installation class=permanent-installation>Permanent Installation</option>
</select>
</form>

非常感谢任何帮助！

Answer 1

您发布的代码与'anchors'无关，我认为它代表<a>代码。

请记住：jQuery选择器基于CSS选择器。前导.匹配class元素，前导#匹配元素id。

事件处理程序的第一行将显示id匹配this.value的元素。第二行将隐藏<p>与id不匹配的所有this.value。（顺便说一句，jQuery提供了一个更容易阅读的.not()函数）

一个重要的错误：您的option value一切都以#开头，然后脚本再次在其前面汇总#。这可能不是你想要的。

旁注："As of jQuery 1.7, the .on() method is the preferred method for attaching event handlers"。并非.bind()不起作用，但.on()更短，功能更强。

Answer 2

让我们根据您发布的代码制作一个工作示例。

我注意到的第一件事是，form和select标签都具有相同的id属性（id值在HTML文档中必须是唯一的），这就是为什么"#portfolio-list"选择器不能按预期工作的原因{ {1}}事件是针对表单而不是针对select标签触发的（如果您没有将数据发送回服务器，则不需要表单标记）。

此外，change等段落的选择器以＃开头，选项值也以＃开头，最后选择器看起来像"#"+this.value，而且不是有效的选择器。

在jQuery中，"##custom-exhibits方法主要用于获取表单元素的值，.val()是本机JavaScript，虽然两种方法都是正确的，但如果你使用的是jQuery，那么最好使用他的方法

.value

将自定义帖子类型类别链接到同一页面上的锚点

2 个答案: