jQueryをクリックするとHTMLが表示されます

Question

ボタンをクリックすると、HTMLが変更されます。 しかし、もう一度クリックすると、スライドのトグルが起動しますが、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/

それがどのように行われるか任意のアイデア？

あなたは

Answer 1

あなたがテキストを切り替えることが条件演算子? :を使用することができますありがとうございました。

Live Demo

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

Answer 2

あなたが表示または非表示にしているかどうかに応じて、.htmlに'Show me'または'Hide me'を渡す必要があります。一つの方法は、スライド式の前に#visibleの可視性を確認するために、次のようになります。

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

、その結果：

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

Demo

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

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