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");
    });

});

（文件）.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');        
    }
});

Toggle（）不会在提供的文本之间循环

2 个答案: