jquery - Toggle() 不会在提供的文本之间循环

Question

测试网站在这里： http: //pomonabeta.comeze.com/

我有一个幻灯片，用户要求它是可选的。我有一个按钮可以隐藏或显示幻灯片。这是代码：

    //hiding and showing the slideshow
$('#show_hide_button').click(function(){
    $('.fluid_container').slideToggle();
    $('#show_hide_button').toggle(
    function(){
    $('#show_hide_button').text("Show the slideshow");
    },
    function(){
    $('#show_hide_button').text("Hide the slideshow");
    });

});

(document).ready 已实现

幻灯片隐藏和显示成功。问题：文本更改为“显示幻灯片”并保持该状态。切换似乎无法正常工作。你能在我的编码中找到错误吗？

Answer 1

    //hiding and showing the slideshow
$('#show_hide_button').click(function(){
    $('.fluid_container').slideToggle();

//this will set the text to whichever it is not already
    $('#show_hide_button').text(function (index, text) {
        return (text == "Show the slideshow" ? "Hide the slideshow" : "Show the slideshow");
    });
});

Answer 2

我建议 ：

$('#show_hide_button').click(function(){
    $this = $(this);
    $('.fluid_container').slideToggle();

    if($this.hasClass('showed')){
      $('#show_hide_button').text('Hide..');
      $this.removeClass('showed');
     }
    else {
      $('#show_hide_button').text('show..');
      $this.addClass('showed');        
    }
});