Question

我正在使用这个小提琴http://jsfiddle.net/vVsAn/4821/我想点击按钮文字。我尝试了不同的东西，但似乎不适合我。任何帮助将不胜感激。下面是我的HTML代码<div id='content'>Category Contents</div> <input type='button' id='hideshow' value='Show Categories'>

有什么方法可以为它添加一些过渡效果吗？即使内容从上下“垂直”显示/隐藏自下而上，因为它是从左右移动的从右到左

Answer 1

您的主要问题是<input>有value，但您正试图在其上使用.text()。您的第一步是将其更改为.val()。

接下来，您使用了旧版本的jQuery，尝试更新的内容，而不是.live()（已弃用），请使用.on()。

这里是working demo。（注意：我确实将jQuery版本更改为2.2.1）

Answer 2

你可以做这样的事......

http://jsfiddle.net/vVsAn/4822/

$(document).ready(function() {

var count = 0;
$('#hideshow').live('click', function(event) {
$('#content').toggle('show');
count++;
    if(count % 2)
    {
       $(this).attr('value', 'Show Categories');
    }
    else
    {
       $(this).attr('value', 'Hide Categories');
    }

 });

});

Answer 3

你有一些问题

您使用的输入value可以使用.val()而不是text属性
您正在检查“显示答案”，但您的按钮实际上显示“显示类别”
如果可能的话，你应该使用更新版本的jQuery和.on()代替.live()

$(document).ready(function() {
  $('#hideshow').live('click', function(event) {
    $this=$(this);
    $('#content').toggle();
    	if ($.trim($this.val()) === 'Show Answer') {
        $this.val('Hide Answer');
    } else {
        $this.val('Show Answer');        
    }
    
    return false; 
  });
});

#content {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<div id='content'>Category Contents</div>
<input type='button' id='hideshow' value='Show Answer'>

Answer 4

您的代码中存在两个问题。

您应该使用.val（）函数而不是.text（）

您的按钮值为显示类别而非显示答案

$( document ).ready( function(){
$('#hideshow').on('click', function(event) {
    $('#content').toggle('show');
    if ($.trim($(this).val()) === 'Show Categories') {
        $(this).val('Hide Answer');
    } else {
        $(this).val('Show Answer');
    }
    return false; 
});

}）;

注意：.live()从Jquery Ver开始不推荐使用。 1.7。因此，请使用.on()代替

使用javascript更改按钮文本无效

4 个答案: