JQuery Скрытие и отображение div с помощью одной кнопки

Question

if (p5goback = true)
    {
        $("#p5-6").fadeOut("slow");
        p5goback = false;   
    }
else    
    {
        $("#p5-6").fadeIn("slow");
        var p5goback = true;
    }

Используя приведенный выше код, я хотел бы иметь возможность использовать одну кнопку, чтобы скрыть и скрыть div.

Приведенный выше код не работает, есть идеи, почему?

Я не верю, что HTML нужен, но если вы хотите, чтобы jsfiddle оставил комментарий.

Приветствия

Answer 1

Ваше состояние назначается, а не проверяется.Используйте == для сравнения:

if(p5goback == true) { ... }

Поскольку p5goback является логическим значением, вы можете полностью исключить часть == true:

if(p5goback) { ... }

Поскольку вы всегда устанавливаетеp5goback к обратному тому, что было, вы могли бы сойти с рук просто:

$('#p5-6').fadeToggle('slow');
p5goback = !p5goback;

Обратите внимание, что это может привести к неожиданному поведению, если p5goback (или видимость #p5-6)когда-либо изменялось чем-либо иначе , чем эта функция (т. е. если есть сценарий, в котором только #p5-6 видимость или значение логического значения p5goback)

Чтобы быть уверенным в том, что состояние всегда согласовано между этими двумя переменными, вы можете написать что-то вроде этого, но от этого страдает читаемость, и вам может быть лучше, если вы просто используете условие:

$.fn[ p5goback ? 'fadeOut' : 'fadeIn' ].call($('#p5-6'), 'slow');
p5goback = !p5goback;

Приведенный выше код вызывает $.fn.fadeOut или $.fn.fadeIn, в зависимости от значения p5goback, а затем устанавливает p5goback на обратное логическое значение его текущего значения.

Answer 2

Будет лучше, если вы используете функцию .fadeToggle();)

 $("#p5-6").fadeToggle("slow");

Answer 3

Допустим, вы находитесь внутри метода button.onclick, который хотите использовать. Вместо fadeIn / fadeOut вы можете использовать

$("#p5-6").toggle("slow");

А также вам нужно исправить заявление if: if (p5goback == true)