javascript - jQuery 在点击时切换 HTML

Question

当我单击按钮时，HTML 会发生变化，但是当我再次单击时，幻灯片切换会启动，但我想将 html 放回为 Show Me。

<div id="show">Show Me</div>
<div id="visible">Hello, My name is John.</div>

$(document).ready(function(){
    $("#show").click(function(){
        $('#visible').slideToggle();
        $('#show').html('Hide me');
    });
})

http://jsfiddle.net/u2p48/13/

知道这是怎么做的吗？

谢谢

Answer 1

您可以使用条件运算符? :在文本之间切换。

现场演示

$(document).ready(function(){
    $("#show").click(function(){
        $('#visible').slideToggle();            
        $('#show').html($('#show').text() == 'Hide me' ? 'Show Me' : 'Hide me');
    });
})

Answer 2

您需要通过'Show me'或'Hide me'到.html，具体取决于您是显示还是隐藏。一种方法是检查#visible滑动前的可见性：

var on = $('#visible').is(':visible');

因此：

$('#show').html(on ? 'Show me' : 'Hide me');

演示

Answer 3

也看看这个解决方案：

$("#show").click(function(){
    if ($('#visible').hasClass('visible')) {
        $('#visible').slideDown().removeClass('visible');
        $('#show').html('Hide me');
    } else {
        $('#visible').slideUp().addClass('visible');
        $('#show').html('Show Me');
    }    
});

http://jsfiddle.net/xkyf2/1/

Answer 4

在您的 html 中使用数据属性

	$('button').on('click', function(){
		var that = $('button');
		if(that.text() == that.data("text-swap")){
			that.text(that.data("text-original"));
		} else {
			that.data("text-original", that.text());
		that.text(that.data("text-swap"));
		}	
	});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button data-text-swap="Replace Text" data-text-original="Original Text">Original Text</button>