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)，并确保在未设置为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

.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.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。

jQuery if（）问题

6 个答案: