링크 텍스트 토글 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);
});

그러나 그것은 작동하지 않습니다! 평소뿐만 아니라 ... 다른 건축. 누군가가 여기에 무엇이 잘못되었는지 알려 주시겠습니까? 감사!

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:

일치하는 요소를 클릭 할 때마다 첫 번째 지정된 기능이 시작됩니다. 다시 클릭하면 두 번째가 발사됩니다. 모든 후속 클릭은 두 기능을 통해 계속 회전합니다.