Jqueryをクリックして「表示」または「非表示にする」テキストを変更する

Question

このスクリプトでは、「表示」リンクをクリックしてプレビュー画像を表示すると、リンクテキストが「非表示」に変わります。 3回目のクリック後にのみ機能します。

<span id='previewLinks'><br/><a id='showPreview' title='".get_option('my_theme')."'>Show</a> 

$('#showPreview').click 
(
    function(e) 
    { 
    var myImage = $('#my_theme :selected').val(); 
    $('#largePreview').slideToggle(0, function() { 
     $('#showPreview').text($(this).is(':visible') ? 'Hide' : 'Show'); 
    }); 
    $('#largePreview').attr('src', '<?php echo get_bloginfo('template_directory') ?>/styles/'+myImage+'/screenshot-help.jpg'); 
    } 
); 

Answer 1

あなたはこれを試すことができます

See example here.
1.

$(document).ready(function(){ 
}); 

2. <a href="javascript:;"> TEXT </a> will give you a right anchor
がそれを願っています助けて！ Jasper Tooに感謝します。

Answer 2

#largePreviewはあなたが想定しているものから表示状態の反対を持っている必要がありますので、それは最初に動作しない理由があります。この変更により修正される場合があります。 !

$('#showPreview').text(!$(this).is(':visible') ? 'Hide' : 'Show'); 

それとも、#largePreviewのCSSを変更する必要がありますに注意してください。ちょうどあなたが間違っていたかを把握

$('#showPreview').click(
    function(e) { 
    var myImage = $('#my_theme :selected').val(); 
    $('#largePreview').slideToggle(0, function() { 
     $('#showPreview').text($(this).is(':visible') ? 'Hide' : 'Show'); 
    }); 
    $('#largePreview').attr('src', '<?php echo get_bloginfo('template_directory') ?>/styles/'+myImage+'/screenshot-help.jpg'); 
    }).click(); 

Answer 3

：