使用jQuery检查可见性(调试）

Checking visibility with jQuery (debug)

本文关键字：调试 可见性 jQuery 检查 使用      更新时间：2023-09-26

我关注了一些帖子，以便能够检查div:的可见性

HTML:

<div class="language" onclick="Show_Div()">
  <div class="menu-langues">
    //my code here
  </div>
</div>

脚本：

function Show_Div() {
$Div_id = "menu-langues";
    if ( $(Div_id).is(':hidden')) {
        ($Div_id).show();
    }
    else {
        ($Div_id).hide();
    }
}

控制台：

Uncaught ReferenceError: Div_id is not defined

我看不出我做错了什么，有人能帮我吗？

谢谢！：）

您定义了一个变量，然后在if语句的代码中使用了另一个变量。

if ( $(Div_id).is(':hidden')) {

应该是

if ( $($Div_id).is(':hidden')) {

这应该可以解决错误。然而，为了获得工作代码，我建议这样写：

function Show_Div() {
    $Div_id = $(".menu-langues");
    if ( $Div_id.is(':hidden')) {
        $Div_id.show();
    }
    else {
        $Div_id.hide();
    }
}

通过这种方式，您可以将变量$Div_id转换为jQuery对象，在该对象上可以执行函数。通过将其保存在变量中，代码不必一遍又一遍地查找元素。

不要将onclick之类的内联事件处理程序与jQuery混合使用。jQuery处理程序将做得更好，并具有额外的功能。正如@Rory McCrossan所说，只需使用toggle。

代码：

$('.language').click(function(){
    // Show if hidden and hide if visible
    $('.menu-langues').toggle();
});

Html（无内联处理程序）:

<div class="language">
  <div class="menu-langues">
    //my code here
  </div>
</div>

如果页面上有多个相同按钮，则可以使用范围选择器（第二个参数定义范围）来确定选择的目标：

$('.language').click(function(){
    // Show if hidden and hide if visible
    $('.menu-langues', this).toggle();
});

一些错误：菜单语言是一个类而不是ID，因此，您可以使用jQuery将其引用为：$('.menu-langues')如果您需要引用ID，请使用jQuery:$('#menu-langues')

因此，使用"."引用类，使用"#"引用ID。

您使用了$Div_id = "menu-langues";。。。我把它改成：Div_id = "menu-langues";

你也写$(Div_id).show();，我固定为：$(Div_id).show();

剪切的代码修复并工作：

function Show_Div() {
var Div_id = ".menu-langues"; // is a class, not ID
    if ( $(Div_id).is(':hidden')) {
        $(Div_id).show();
    }
    else {
        $(Div_id).hide();
    }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="language" onclick="Show_Div()">
  <div class="menu-langues">
    test of visibility
  </div>
</div>
<button onClick="javascript:Show_Div();">Click</button>

您的变量名是$Div_id，而不是Div_id。此外，您正在尝试使用类名进行选择，因此需要在选择器中预先添加一个.。

你的代码应该看起来像：

function Show_Div() {
    $Div_id = ".menu-langues";
    if ( $($Div_id).is(':hidden')) {
        $($Div_id).show();
    }
    else {
        $($Div_id).hide();
    }
}

代码应该更像：

function Show_Div() {
    var $Div_id = "menu-langues";
    if ( $($Div_id).is(':hidden')) {
        $($Div_id).show();
    } else {
        $($Div_id).hide();
    }
}

另外值得一提的是，JavaScript变量名和函数名的约定是camelCase。

相关文章：