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

Question

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

Я построил простой тест с помощью 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');

});

});

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

590 6

jQuery html css

6 ответов:

Comments

Ничего не найдено.

ChaosPandion · Accepted Answer · 2009-08-25 23:01:29

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

Независимо от этого вы можете просто позвонить .toggle () для отображения или скрытия элемента.

Http://docs.jquery.com/Effects

karim79 · Accepted Answer · 2009-08-25 23:03:26

Вместо этого используйте toggleClass :
$(document).ready(function () {
    $('#show').toggleClass('hidden');
});

Gavin H · Accepted Answer · 2009-08-25 23:04:35

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

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

});

BrianV · Accepted Answer · 2009-08-25 23:05:04

Просто. Вы используете $('.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');
  }
);

peacedog · Accepted Answer · 2009-08-25 23:05:58

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

jyoseph · Accepted Answer · 2009-08-25 23:07:10

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

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