切換按鈕值的簡單方法

與標題一樣，我希望用戶單擊按鈕並獲得新值。在這種情況下，它是一個按鈕，可以將菜單從隱藏狀態切換到可見狀態並來回切換。這是我的代碼。切換按鈕值的簡單方法

我想它說「節目菜單」和「隱藏菜單」

現在我點擊，菜單打開，新的值設置和菜單可以關閉，但價值不回去。

的jQuery：

$(function() { 
$("#UIcontainer").hide(); 

$("#button").click(function() { 
$("#UIcontainer").toggle(function() { 
    $("#button").val('hide menu'); 
}); 
    }); 
});

來源

2013-09-24 thomasp423

$(function() { 
    $("#UIcontainer").hide(); 

    $("#button").on('click', function() { 
     $("#UIcontainer").toggle(); 
     this.value = this.value == 'hide menu' ? 'show menu' : 'hide menu'; 
    }); 
});

FIDDLE

來源

2013-09-24 18:50:05 adeneo

你能解釋最後一行發生了什麼嗎？此外，我還寫了一些有效的陳述，但我看到你的陳述是否更加愚蠢。謝謝！ – thomasp423

最後一行是一個三元語句，就像if/else語句一樣，它根據當前的值設置值，只需簡單的javascript，不需要jQuery！ – adeneo

嘗試：

$(function() { 
$("#UIcontainer").hide(); 

$("#button").click(function() { 
$("#UIcontainer").toggle(); 
$(this).val($(this).val() == "hide menu" ? "show menu" : "hide menu"); 
    }); 
});

來源

2013-09-24 18:51:44 Unknown

測試和魅力的工作

<input type="button" id="button" value="hide menu" /> 
<div id='UIcontainer'>fladfl</div> 

<script type="text/javascript"> 
$(function() { 
    $("#button").click(function() { 
     var val = $(this).val(); 
     if(val=="hide menu") { 
      $("#button").val('show menu'); 
     } else { 
      $("#button").val('hide menu'); 
     } 
     $("#UIcontainer").toggle(); 
    }); 
}); 
</script>

來源

2013-09-24 18:56:20 Salim

它會是這樣的。爲您的按鈕設置一個屬性。例如切換。

<input type="button" toggle="show"> 


$(function() { 

    $("#button").click(function() { 
     if ($this.attr("toggle")=="show"){ 
      $("#UIcontainer").show(); 
      $this.attr("toggle")="hide" 
     } 
     else{ 
      $("#UIcontainer").hide(); 
      $this.attr("toggle")="show" 
     } 
    }); 

});

來源

2013-09-24 19:10:52

切換按鈕值的簡單方法

回答

相關問題