未捕获的类型错误：$(...).find(...).hasClass(...).show 不是函数答案

【问题标题】：Uncaught TypeError: $(...).find(...).hasClass(...).show is not a function未捕获的类型错误：$(...).find(...).hasClass(...).show 不是函数
【发布时间】：2015-10-07 13:27:24
【问题描述】：

不知道为什么这不起作用，但我希望有第二眼。

是的，我正在引用 jQuery 库。

var $current_selection;
$('.nav-link').hide();

$('a').click(function () {

    current_selection = $(this).attr("class");

    $('#nav').find("div").hasClass(current_selection).show();

});

我的 HTML

<a href="#" class="link-one">Nav Option One</a>
<div id="nav">
    <div class="nav-link link-one">
        <p>Test Link One</p>
    </div>
</div>

我在控制台中遇到错误

未捕获的类型错误：$(...).find(...).hasClass(...).show 不是功能

【问题讨论】：

它可能帮助了其他人。我在阅读文档和吸收信息方面真的很糟糕，所以这样的事情可能看起来很简单，但它可以帮助一些人。
Upvote 也是为了研究工作 ..，一个简单的 MCVE 或调试会突出您的问题，即使您没有阅读文档
与我的实际代码相比，我上面的示例是最小的，我确实尝试过调试，但在不知道 hasClass 返回布尔值的情况下，我没有解决正确的问题。

标签： javascript jquery html

【解决方案1】：

hasClass 返回布尔值，因此您不能链接hasClass。

你可以使用

$('#nav').find("div." + current_selection).show();

如果current_selection 包含多个类，则这些类将包含空格，并且选择器将无法按预期工作。要使其正常工作，所有空格都需要替换为.。

current_selection = $(this).attr("class").replace(/ /g, '.');
$('#nav').find("div." + current_selection).show();

【讨论】：

【解决方案2】：

hasClass() 返回true 或false。您实际上需要选择适当的元素：

 $("#nav div." + current_selection).show();

【讨论】：

这当然只适用于current_selection 仅包含单个类名（如示例中）。
@FelixKling 但是hasClass() 也是如此，所以我们没有失去任何预期功能。
我猜。虽然$( "<div class='foo bar'></div>" ).hasClass( "foo bar" ) 返回true，而$( "<div class='foo bar baz'></div>" ).hasClass( "foo baz" ) 返回false :-/ 不管怎样，我不太关心hasClass，更关心<a> 的class 属性可以包含多个类。只是要记住的事情。