切换按钮值的简单方法

与标题一样，我希望用户单击按钮并获得新值。在这种情况下，它是一个按钮，可以将菜单从隐藏状态切换到可见状态并来回切换。这是我的代码。切换按钮值的简单方法

我想它说“节目菜单”和“隐藏菜单”

现在我点击，菜单打开，新的值设置和菜单可以关闭，但价值不回去。

的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

切换按钮值的简单方法

回答

相关问题