Question

我有以下代码：

$(".main").click(function() {
    $(this).toggleClass("classA").toggleClass("classB");
    $(".secondary").toggleClass("classC").toggleClass("classD");
));

$(".secondary").click(function() {
    $(".secondary").toggleClass("classC").toggleClass("classD");
));

和HTML：

<div class="main"></div>

<div>
    <div class="secondary"></div>
    <table class="tbl"></table>
</div>

<div>
    <div class="secondary"></div>
    <table class="tbl"></table>
</div>

目前，它允许我在单独点击每个“辅助”元素时切换类，或者在单击“主”时更改所有辅助元素。当点击相应的“secondary”或“main”时，我需要在相应的div中添加show / hide表。目标有困难。试过但失败了：

$(this).closest(".tbl").toggle();

Answer 1

试试这个：

$(".secondary").click(function() {
    $(".secondary").toggleClass("classC").toggleClass("classD");
    $(this).parent().children(".tbl").toggle();
 //or this: $(this).next(".tbl").toggle();
));

Answer 2

我不确定我是否完全理解你的要求，但请看一下这个演示：http://jsfiddle.net/Ender/DQcSE/

以下是其来源：

$(".main").click(function() {
    $(this).toggleClass("classA classB");
    $(".secondary").each(toggleSecondary);
});

$(".secondary").click(toggleSecondary);

function toggleSecondary() {
    $(this).toggleClass("classC classD")
           .next('.tbl').toggle();
}

我已经设置了一个函数来一般地处理.secondary的切换。在.main单击处理程序中，切换主类，并在每个secondaryToggle()上调用.secondary函数。在.secondary点击处理程序中，仅在点击的元素上调用secondaryToggle()。

secondaryToggle()切换该元素的类，并选择下一个元素（仅当它具有类.tbl时）并切换其可见性。

另请注意，您无需为每个班级调用.toggleClass() - 您可以将其传递给以空格分隔的班级切换列表，就像使用.addClass()和.removeClass()一样。

帮助定位元素

2 个答案: