jQuery if（）问题

Question

有人可以告诉我以下代码有什么问题吗？ 一切看起来都很好。 我要达到的目的是使侧面板在点击时变宽，如果值是“ Normal”，则在点击时变短。

$(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) ，并确保在未将按钮的值设置为500px时将按钮的值更改为“ Normal”以外的值。

这是一个“更好”的示例，我们在其中缓存$(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

.val()返回一个字符串。
x.val()没有任何意义。

同样，即使第一个处理程序已经扩展了，它也始终会运行（如果需要， if需要一个）。
另外，您需要重置按钮文本。

Answer 3

你的意思是这样吗？

$(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 4

我想你应该改变

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

至

var x = $("#widen_btn");

然后

x.val()

确实有意义

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

首先，您不需要为此将两个点击处理程序分配给同一字段。 两者都将在每次单击时运行，因此第一个将其设置为较宽，然后第二个（一旦您修复了if条件）将其设置为较小。

其次，当x已经是（string）值时， x.val()没有意义，因此您想比较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是指clicked元素，因此我使用了$(this)而不是$("#widen_btn")并将对该引用的引用缓存在$this变量中。 如果所讨论的按钮是<input type="button"> ，则可以直接说出this.value 。