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 。