Форум

Dana19 · #1 (**permalink**) 21.11.2019, 12:13

Здравствуйте. Помогите, пожалуйста, разобраться.
Есть надпись. Один раз на нее нажимаешь - пропадает форма, название надписи меняется. Второй раз на нее нажимаешь - форма появляется, название надписи меняется на первоначальное. По урокам так и должно работать. Я только начинаю изучать jquery. Но в итоге сама надпись скрывается. Что не так?Код прилагаю.



$(document).ready(function() {

$("#formHide").toggle(
function() {
$('#my_form').fadeOut(5000);
$(this).text('Развернуть форму');
},
function() {
$('#my_form').fadeIn(1000);
$(this).text('Свернуть форму');
}

}); //конец ready

laimas · #2 (**permalink**) 21.11.2019, 13:06

Не используйте toggle в таком варианте, начиная с версии 1.9 такая поддержка метода удалена.

рони · #3 (**permalink**) 21.11.2019, 13:59

Dana19,

https://javascript.ru/forum/misc/532...tml#post353361

Dana19 · #4 (**permalink**) 21.11.2019, 14:15

Большое спасибо

Dana19 · #5 (**permalink**) 21.11.2019, 14:26

А чем заменить тогда toggle, чтобы он работал как переключатель? В моем коде? Подскажите, пожалуйста.

laimas · #6 (**permalink**) 21.11.2019, 14:32

Сообщение от Dana19

чтобы он работал как переключатель?

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

рони · #7 (**permalink**) 21.11.2019, 14:43

Сообщение от Dana19

А чем заменить тогда toggle, чтобы он работал как переключатель? В моем коде? Подскажите, пожалуйста.

пост #4 там нужный вам код по ссылке

laimas · #8 (**permalink**) 21.11.2019, 14:48

рони, лучше toggleClass() и остальное CSS. )

Dana19 · #9 (**permalink**) 21.11.2019, 15:13

Сообщение от рони

пост #4 там нужный вам код по ссылке

Я не понимаю этот кусок кода
$.fn.mytoggle = function() {
14
var b = arguments;
15
return this.each(function(i, el) {
16
var a = function() {
17
var c = 0;
18
return function() {
19
b[c++ % b.length].apply(el, arguments)
20
}
21
}();
22
$(el).click(a)
23
})
24
};

рони · #10 (**permalink**) 21.11.2019, 15:28

Сообщение от Dana19

Я не понимаю этот кусок кода

со временем разберётесь, а сейчас зачем? это код которого уже нет в jquery, но разместив который вы получите, те методы которые описывает ваш учебник.

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
   <script>
$.fn.mytoggle = function() {
    var b = arguments;
    return this.each(function(i, el) {
        var a = function() {
            var c = 0;
            return function() {
                b[c++ % b.length].apply(el, arguments)
            }
        }();
        $(el).click(a)
    })
};

$(function() {
    $("#formHide").mytoggle(
        function() {
            $('#my_form').stop().fadeOut(5000);
            $(this).text('Развернуть форму');
        },
        function() {
            $('#my_form').stop().fadeIn(1000);
            $(this).text('Свернуть форму');
        })
});
  </script>
</head>

<body>
<div id="formHide">Свернуть форму</div>


<!-- Form starts -->
<form name="feedback_form" id="my_form">
<fieldset>
<legend>Contact Form</legend>
  <table width="100%" border="0">
    <tr>
      <td width="120"><label for="name">Name</label></td>
      <td><input name="name" id="name" size="30" /></td>
    </tr>
    <tr>
      <td width="120"><label for="email">E-mail</label></td>
      <td><input name="email" id="email" size="30" /></td>
    </tr>
    <tr>
      <td width="120" valign="top"><label for="comments">Comments</label></td>
      <td><textarea name="comments" id="comments" rows="5" cols="40"></textarea></td>
    </tr>
    <tr>
      <td>
      </td>
      <td>
        <input type="submit" name="Submit" value="Submit" />
      </td>
    </tr>
  </table>
</fieldset>
</form>
<!-- Form ends -->
</body>
</html>

Форум

Справочник

Discord чат

Курсы javascript