Question

我关注了一些帖子，以便能够检查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

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

谢谢！：）

Answer 1

您已经定义了一个变量，然后在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对象，您可以在该对象上执行函数。通过将其保存在变量中，代码不必一遍又一遍地查找元素。

Answer 2

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

代码：

toggle

Html（无内联处理程序）：

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

如果您在页面上有相同按钮的倍数，则可以使用范围选择器定位选择（第二个参数定义范围）：

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

Answer 3

一些错误：menu-langues是一个类而不是一个ID，因此，你可以用jQuery引用它：$('.menu-langues') 如果您需要引用ID，请使用jQuery：$('#menu-langues')

所以，请使用＆＃39; .＆＃39;引用一个班级＆＃39; #＆＃39;引用身份证。

您使用了$Div_id = "menu-langues"; ...我将其更改为：Div_id = "menu-langues";

你也写$(Div_id).show();并修复：$(Div_id).show();

剪切的代码已修复并正常工作：

＆＃13;

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();
    }
}

＆＃13;

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

＆＃13;

Answer 4

您的变量名称为$Div_id而不是Div_id。此外，您还尝试使用班级名称进行选择，因此您需要在选择器前添加.。

您的代码应如下所示：

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

Answer 5

代码应该更像：

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

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

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

5 个答案: