Простой jQuery-тест с использованием функции «toggle», не ведущий себя так, как ожидалось

Question

Я сконструировал простой тест с jQuery, чтобы посмотреть, смогу ли я получить элемент, который можно показать / скрыть при нажатии кнопки.

HTML-файл:

<link href="test.css" rel="stylesheet" type="text/css" />
<script src="jquery.js" type="text/javascript"></script>
<script src="test.js" type="text/javascript"></script>
<input type="submit" id="show" value="Show content">
<div class="hidden">
Some content!
</div>

Файл CSS:

.hidden {
 display: none;
}

Файл Javascript:

$(document).ready(function () {
$('#show').toggle(function () {
    $('.hidden').removeClass('hidden');
}, function () {
    $('.hidden').addClass('hidden');
});

});

... при первом нажатии кнопки содержимое отображается, как и ожидалось, однако при втором нажатии оно не исчезает. Кто-нибудь может сказать мне, почему?

Answer 1

Ваша проблема в том, что после удаления скрытого класса вы не можете выбрать его.

В любом случае, вы можете просто вызвать .toggle (), чтобы показать или скрыть элемент.

http://docs.jquery.com/Effects

Answer 2

Попробуйте что-нибудь еще как:

HTML-файл:

<link href="test.css" rel="stylesheet" type="text/css" />
<script src="jquery.js" type="text/javascript"></script>
<script src="test.js" type="text/javascript"></script>
<input type="submit" id="show" value="Show content">
<div id="mydiv" class="hidden">
Some content!
</div>

Файл CSS:

.hidden {
 display: none;
}

Файл Javascript:

$(document).ready(function () {
$('#show').toggle(function () {
        $('#mydiv').removeClass('hidden');
}, function () {
        $('#mydiv').addClass('hidden');
});

});

Answer 3

Используйте toggleClass вместо:

$(document).ready(function () {
    $('#show').toggleClass('hidden');
});

Answer 4

Вот описание того, что происходит с вашим кодом:

$(document).ready(function () {
    $('#show').toggle(function () {
        $('.hidden').removeClass('hidden'); <-- this removes the class of hidden
    }, function () {
        $('.hidden').addClass('hidden'); <!-- this tries to add the class of hidden, but your selector is '.hidden' so it isn't possible.
});

Попробуйте это:

$(document).ready(function () {
    $('#show').toggle(function () {
        $('#show').removeClass('hidden');
    }, function () {
        $('#show').addClass('hidden');
});

Или даже лучше:

$(document).ready(function () {
    $('#show').toggle();
});

Answer 5

Вы также можете использовать .show () и .hide (), хотя я думаю, что .toggle () - более элегантное решение (при прочих равных).

Answer 6

Simple. Вы используете селектор $ ('. Hidden'), чтобы найти элемент с классом 'hidden'. Однако при первом нажатии кнопки вы удалите скрытый класс.

У вас нет предметов с этим классом, поэтому он не может найти его для показа снова.

Лучше было бы:

<input type="submit" id="show" value="Show content">
<div class="toggle hidden">
Some content!
</div>

$(document).ready(function () {
  $('#show').toggle(function () {
    $('.toggle').removeClass('hidden');
  }, function () {
    $('.toggle').addClass('hidden');
  }
);