6

ボタンをクリックすると 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/

それはどのように行われますか？

ありがとうございました

4

4 に答える 4

24

条件演算子を使用? :して、テキストを切り替えることができます。

ライブデモ

$(document).ready(function(){
    $("#show").click(function(){
        $('#visible').slideToggle();            
        $('#show').html($('#show').text() == 'Hide me' ? 'Show Me' : 'Hide me');
    });
})
于 2013-03-01T09:13:26.503 に答える
2

表示しているか非表示にしているかに応じて、パス'Show me'またはパスする必要があります。1つの方法は、スライドする前にの可視性を確認することです。'Hide me'.html#visible

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

その結果：

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

デモ

于 2013-03-01T09:13:48.333 に答える
0

このソリューションも見てください：

$("#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-01T09:18:23.027 に答える