jQuery在点击时切换HTML

当我点击HTML更改按钮时，但是当我再次点击时，滑动切换会触发，但是我想把HTML作为Show Me放回去。jQuery在点击时切换HTML

<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/

任何想法如何做呢？

谢谢

来源

2013-03-01 John Mersal

可以使用条件操作? :到文本之间切换。

Live Demo

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

来源

2013-03-01 09:13:26 Adil

嗯，这是相当快:)这奏效了使用数据属性:)谢谢你这么多:) – 2013-03-01 09:14:45

欢迎您... – Adil 2013-03-01 09:15:22

你需要传递'Show me'或'Hide me'到.html，这取决于你正在显示或隐藏。一种方法是滑动之前检查的#visible知名度：

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

，因此：

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

Demo

来源

2013-03-01 09:13:48

谢谢你:)做了诀窍2 :) – 2013-03-01 09:17:54

看看这个解决方案也：

$("#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/

来源

2013-03-01 09:18:23

我第一次做到了这一点，但我不想添加课程并删除课程。我喜欢在HTML文本之间切换的最佳方式，因为我没有使用它的经验，但现在我明白它是如何工作的:) – 2013-03-01 09:20:55

我更喜欢使用slideUp和slideDown而不是slideToggle，因为这样可以确保它在下滑时滑落文字就变成了“隐藏我”，反之亦然。 Slidetoggle不太清楚，因为只是通过查看代码，你不能说出会发生什么，它取决于实际状态，它可能会造成混淆。 – 2013-03-01 09:26:44

在HTML

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

<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>

来源

2016-03-10 18:51:07 ardev

jQuery在点击时切换HTML

回答

相关问题