-2

私は一般的にJqueryとJavascriptにかなり慣れていないので、何かを隠した後にボタンのテキストを変更するにはどうすればよいか疑問に思っていました。

私の知る限り、次のコードで何かを隠します。

$("element").click(function() {
    $("element2").hide("slow");
});

そして何かを表示するには：

$("element").click(function() {
    $("element2").fadeIn("slow");
});

だから私がやりたいのは、記事タイプのもので、「非表示」ボタンを押すと、すべての段落テキストが非表示になりますが、「表示」という別のボタンが残ります

どうすればこれを達成できますか?

4

4 に答える 4

2

ボタンが 1 つ必要で、そのテキストを変更するだけです。すべてのコンテンツが最初から表示されていると仮定しましょう。HTML にボタンを追加し、ID を付けて簡単に識別できるようにします。

<button id="toggleButton" type="button">Hide</button>

次に、イベント ハンドラーをボタンにバインドします。

  • 表示/非表示にする要素の可視性を切り替え、
  • ボタンのテキスト内容を変更します

そして、ここにあります：

$('#toggleButton').click(function() {
    // toggle visibility if all p elements
    $('p').toggle();

    // Change text based on current text
    // If the current text is 'Hide' then we just hid the elements and
    // we have to change the text to 'Show' (and vice versa).
    $(this).text(function(i, current_text) {
        return current_text === 'Hide' ? 'Show' : 'Hide';
    });
});

デモ

参照: .click , .toggle, .text,条件演算子.

本当に非表示にしたい要素のみに一致するようにセレクターを調整する必要がありますが、jQuery には可能なすべてのセレクターに関する優れたドキュメントがあります。

jQuery のドキュメントは非常に充実しているため、時間をかけて読むだけでも価値があります。

始めたばかりなので、http://eloquentjavascript.net/および/またはMDN JavaScript ガイド、およびjQuery チュートリアルを (この順序で) 読むことをお勧めします。

于 2013-02-09T12:44:19.677 に答える
1

隠れる：

$("element").click(function() {
    $("element2").hide("slow");
    $("element").text('Show');
});

表示するには:

$("element").click(function() {
        $("element2").fadeIn("slow");
        $("element").text('Hide');
    });
于 2013-02-09T12:41:13.267 に答える
1

ボタンの値を次のように変更します 

    $("element").click(function() {
    $("element2").hide("slow");
    $("#btnID").prop('value', 'Show');
    }); 

    $("element").click(function() {
        $("element2").fadeIn("slow");
    $("#btnID").prop('value', 'Hide');
    });
于 2013-02-09T12:43:43.813 に答える
0

私は通常、テキストを表示するボタンとテキストを非表示にするボタンの 2 つのボタンを持っています。そのうちの 1 つをクリックすると、1 つが表示され、必要なものがすべて表示され、シェルフが非表示になります。

HTML:

<a href="#" id="bshow" style="display:block"> Show </a>
<a href="#" id="bhide" style="display:none"> Hide </a>
<p id="textshow"  style="display:none"> lorem ipsum</p>

Javascript:

$('#bshow').click(function() {
    $('#bhide').fadeIn();
    $('#textshow').fadeIn();
    $(this).hide();
});

このjsFiddleが役立つと思います：

于 2013-02-09T12:44:49.050 に答える