JQuery если () проблемы

Question

Может кто-нибудь сказать мне, что не так со следующим кодом? Все выглядит хорошо. Я пытаюсь добиться того, чтобы боковая панель расширялась при щелчке, а затем укорачивалась при щелчке, если значение «Нормальное».

$(document).ready(function(){
    $("#widen_btn").click(function(){
        $("#side-panel").css("width", "500px");
        $("#widen_btn").val("Normal");
    });

    $("#widen_btn").click(function(){
        var x = $("#widen_btn").val();
        if(x.val() == "Normal"){
            $("#side-panel").css("width", "250px");
        }
    });
});

Answer 1

Вы можете немного упростить это ..

$(document).ready(function(){
    $("#widen_btn").click(function() {
        if($(this).val() == "Normal") {
            $("#side-panel").css("width", "250px");
            $(this).val("Narrow");
        } else { 
            $("#side-panel").css("width", "500px");
            $(this).val("Normal");
        }
    });
});

Это должно сработать.

Он просто использует $(this) и гарантирует, что вы измените значение кнопки на что-токроме «Normal», когда он не установлен в 500px.

Вот «лучший» пример, где мы кешируем переменную $(this), поэтому мы не тратим время на воссоздание объекта.

$(document).ready(function(){
    $("#widen_btn").click(function() {
        var $widen = $(this);
        if( $widen.val() == "Normal") {
            $("#side-panel").css("width", "250px");
            $widen.val("Narrow");
        } else { 
            $("#side-panel").css("width", "500px");
            $widen.val("Normal");
        }
    });
});

Answer 2

Вы имеете в виду, как это?

$(document).ready(function(){
    $("#widen_btn").click(function(){
        var x = $("#widen_btn").val();
        if(x === "Normal"){
            $("#side-panel").css("width", "250px");
        }else{
            $("#side-panel").css("width", "500px");
        }
    });
});

Answer 3

.val() возвращает строку.
x.val() не имеет смысла.

Кроме того, ваш первый обработчик всегда работает, даже если он уже расширен (вам нужен if там).
Также необходимо сбросить текст кнопки.

Answer 4

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

Во-вторых, x.val() не имеет смысла, когда x уже является (строковым) значением, поэтому вы хотите сравнить x === "Normal". За исключением того, что переменная x используется только в том месте, где она вам вообще не нужна, вы можете просто сравнить .val() === "Normal".

Так попробуйте это:

$(document).ready(function(){
    $("#widen_btn").click(function(){
        var $this = $(this);
        if ($this.val() === "Normal") {
           $this.val("Narrow");
           $("#side-panel").css("width","250px");
        } else {
           $this.val("Normal");
           $("#side-panel").css("width", "500px");
        );
    });
});

Обратите внимание, что в обработчике кликов this относится к элементу, по которому щелкнули, поэтому я использовал $(this) вместо $("#widen_btn") и кэшировал ссылку на него в переменной $this. Если рассматриваемая кнопка - <input type="button">, вы можете просто сказать this.value напрямую.

Answer 5

Вы переопределяете обработчик событий, вы можете сделать что-то вроде этого:

$(document).ready(function(){
var state = 'Not Normal';

$("#widen_btn").click(function(){

       var x = $("#widen_btn");
        if(x.val() == "Normal"){
        $("#side-panel").css("width", "250px");
        $("#widen_btn").val("Not Normal");
        }else{
           $("#side-panel").css("width", "500px");
           $("#widen_btn").val("Normal");
        }

    });
});

Answer 6

Полагаю, вам следует изменить

var x = $("#widen_btn").val();

до

var x = $("#widen_btn");

тогда

x.val()

имеет смысл