jQuery切换两个相邻跨距的可见性_Jquery

jQuery切换两个相邻跨距的可见性

jquery

jQuery切换两个相邻跨距的可见性,jquery,Jquery,这没什么作用，但我不知道为什么？我更喜欢使用nextest（）来避免使用next（）和prev（）。您误解了这个方法最近的方法将返回满足条件的元素最近的父元素。例如，$（'td'）。最近（'table'）将返回直接包含td的表。（如果该表位于另一个表中，它将返回最里面的表）您可以使用nextAll或prevAll方法以及：first选择器来查找元素之后或之前最近的元素，也可以使用sibles方法查找元素的所有同级，但我认为没有简单的方法来查找最近的同级我建议您将所有可切换对嵌套在单独的元素

这没什么作用，但我不知道为什么？我更喜欢使用nextest（）来避免使用next（）和prev（）。

您误解了这个方法

最近的方法将返回满足条件的元素最近的父元素。例如，

$（'td'）。最近（'table'）

将返回直接包含

td

的表。（如果该表位于另一个表中，它将返回最里面的表）

您可以使用

nextAll

或

prevAll

方法以及

：first

选择器来查找元素之后或之前最近的元素，也可以使用

sibles

方法查找元素的所有同级，但我认为没有简单的方法来查找最近的同级

我建议您将所有可切换对嵌套在单独的元素中，如下所示：

$('.act_inact').click(function() {                                  
            $(this).toggle();
            $(this).closest('.act_inact').toggle(); 
        });


$（函数（）{
$（$span.adjSpan”）.toggle（函数（）{
$（“span.active”）.hide（）；
$（“span.inactive”）.show（）；
}，函数（）{
$（“span.inactive”）.hide（）；
$（“span.active”）.show（）；
});
});
.主动{
显示：块；
}
.不活跃{
显示：无；
}
.adjSpan{}
活跃的不活跃的

顺便说一句，我建议您将

act\u inact

重命名为

togglable

。我尝试使用您的结构，它成功了。我更喜欢更改文本值。

$('.act_inact').click(function() {                                  
            $(this).toggle();
            $(this).closest('.act_inact').toggle(); 
        });

<div class="Togglable">
    <span class="Active">Hello!</span>
    <span class="Inactive">Goodbye!</span>
</div>

$('.Togglable span').click(function() {                          
    $(this).parent().children().toggle(); 
});

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="jquery-1.3.2.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function() {
            $("span.adjSpan").toggle(function() {
                $("span.active").hide();
                $("span.inactive").show();
            }, function() {
                $("span.inactive").hide();
                $("span.active").show();
            });
        });
    </script>
    <style type="text/css">
        .active {
            display: block;
        }

        .inactive {
            display: none;
        }

        .adjSpan { }
    </style>
</head>
<body>
    <span class='adjSpan active'>Active</span><span class='adjSpan inactive'>Inactive</span>
</body>
</html>