javascript - jquery 单独切换

Question

我的 html 是这样的:

<a class="tableheadlink" href="#">Impressions</a> <a href="#"><img src="images/table-sort.png" alt="" /></a>
<div class="filter-head">
    <form>
        <select name="website" class="rounded-all no-padding">
            <option value="opt1">&gt;</option>
            <option value="opt2">&lt;</option>
            <option value="opt3">=</option>
        </select>
        <input name="q" type="text" class="rounded-all small">
    </form>
</div>

jquery 像这样:

        $(".filter-head").hide();
        $("a.tableheadlink").click(function(){
            $(".filter-head").toggle();
            return false;
        });

我如何告诉它单独切换 html 部分的每个时刻？页面上大约有 10 个实例，切换将使用我的代码切换所有实例。

谢谢

Answer 1

您需要找到您想要的.filter-head relative到 this，例如:

$(".filter-head").hide();
$("a.tableheadlink").click(function(){
    $(this).nextAll(".filter-head:first").toggle();
    return false;
});

它的作用是从 this 然后使用 .nextAll()与您的类选择器并获取 :first遇到一个就切换。原因.nextAll()而不是.next()是中间还有其他链接。