Проверка видимости с JQuery (отладки)

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 

Я не вижу, что я сделал не так, может ли кто-нибудь помочь мне с этим?

Thank's! :)

Answer 1

Не смешивать inline обработчики событий, такие как 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(); 
}); 

Answer 2

Вы определили переменную, а затем использовали другую в своем коде в инструкции 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 3

Код должен быть больше похож:

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

Стоит также отметить, что конвенция для имен переменных JavaScript и имен функций является верблюжьей.

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

Некоторые ошибки: меню-LANGUES класс не 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>