Простое переключение jquery (не работает)

0

Я думаю, что я могу использовать неправильную библиотеку js. Не знаю.. Я следил за учебником онлайн, и я видел, как парень его кодировал и смотрел, как он работает. Я дважды пересматривал и делал это и все еще не работал.

Вот мой html:

<html lang="en">
<head>
<meta charset="utf-8" />
<title>Title</title>
 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script src="hideshow.js"></script>

</head>
<body>

<a href="#" id="hideshow">Hide </a>

<div id="message" style="width:300px; border:1px solid black; padding:10px">

This is the wording inside of the text for testing purposes.

</div>
</body>

Вот мой js из hideshow.js:

$('#hideshow').toggle(function () {

$('#hideshow').text('Show');

}, function () {

$('#hideshow').text('Hide');
});

Я ценю это, спасибо всем, кто может это понять. :(

  • 1
    Событие переключения было удалено из jQuery 1.9. См. Api.jquery.com/toggle-event
Теги:
show-hide

3 ответа

2

Похоже, вы пытаетесь использовать событие переключения, которое было устарело в jQuery 1.8 и удалено на jQuery 1.9. Новая функция переключения имеет много разных перегрузок, но никто не ведет себя как старый. Взгляните на него и выберите тот, который вам больше всего подходит. Например, вы можете сделать что-то вроде этого:

$('#hideshow').click(function () {
    $('#message').toggle();
    if($('#message').is(':visible')) {
        $('#hideshow').text('Hide');        
    } else {
        $('#hideshow').text('Show');   
    }
});

И здесь вам будет интересно играть. http://jsfiddle.net/74GzV/1/

  • 0
    Я вижу это, но как вы могли бы использовать этот новый переключатель, чтобы также изменить текст, чтобы сказать «Показать»?
  • 0
    Ну ... ты не можешь. Я обновил свой ответ и скрипку, чтобы показать вам, как вы можете это сделать, но логика изменения текста не имеет ничего общего с функцией переключения
Показать ещё 1 комментарий
0

Как указывал j08691, toggle удаляется, но даже если он не был <script src="hideshow.js"></script> работает до того, как страница загрузилась, и поэтому #hideshow будет #hideshow неопределенно. Попробуйте положить все это в $(document).ready после работы вокруг отсутствия toggle

0
var toggler = $('#hideshow');
toggler.text('Hide');

toggler.click(function(e) {
    e.preventDefault();
    $('#message').slideToggle('slow', function () {
      var togglerLabel = $(this).is(':visible') ? 'Hide' : 'Show';
      toggler.text(togglerLabel);
    });
});

http://jsfiddle.net/4TqQT/46/

  • 0
    И в этом он изменяет текст, но после того, как сообщение было скрыто. Я чувствую, что есть более простой способ переключить текст и скрыть сообщение.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню