jquery - JQ でリンク テキストを切り替える際の問題

Question

リンク上のテキストを切り替えるために、このコードを使用しようとしています:

var showText="<span>Open</span> &darr;";
var hideText="<span>Close</span> &uarr;";
$('h1').before('<a href="javascript:;" id="hc_toggle_close">' + showText + '</a>');
$('#hc_toggle_close').click(function () {
    $('#hc_toggle_close:contains("Open")').html(hideText);
    $('#hc_toggle_close:contains("Close")').html(showText);
});

しかし、うまくいきません！通常の if ... else 構文と同様です。誰かがここで何が悪いのか教えてください。ありがとう！

Answer 1

toggleヘルパー関数を使用します。

var showText="<span>Open</span> &darr;";
var hideText="<span>Close</span> &uarr;";
$('h1').before('<a href="javascript:;" id="hc_toggle_close">' + showText + '</a>');
$('#hc_toggle_close').toggle(
  function () {
    $('#hc_toggle_close').html(hideText);
  },
  function () {
    $('#hc_toggle_close').html(showText);
  }
);

のドキュメントからtoggle:

一致した要素がクリックされるたびに、最初に指定された関数が起動され、再度クリックされると、2 番目の関数が起動されます。その後のすべてのクリックは、2 つの機能を循環し続けます。