Question

<span class='act_inact active'>Active</span><span class='act_inact inactive'>Inactive</span>

当我点击.active时，它应该变为隐藏状态，并且.inactive应该是可见的和副verca。由于这些是类，页面上有很多。

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

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

Answer 1

你误解了closest方法。

最接近的方法将返回符合条件的元素最近的父元素。例如，$('td').closest('table')将返回直接包含td的表格。（如果表在另一个表中，它将返回最里面的表）

您可以使用nextAll或prevAll方法以及:first选择器查找元素之前或之前的最近元素，也可以使用siblings方法找到所有元素的兄弟姐妹，但我认为没有一种简单的方法可以找到最近的兄弟姐妹。

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

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

然后你可以写

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

Answer 2

<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>

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

2 个答案: