如何将文本添加到 jquery 脚本按钮？

Posted 2023-03-21

【中文标题】如何将文本添加到 jquery 脚本按钮？

【英文标题】：How do I add text to jquery script button?

【发布时间】：2011-03-26 01:32:50

【问题描述】：

我有这个用于渐进式披露的旧 jquery 脚本：（注意 $(this).text('more...') 代码会更改按钮文本。

<!--for more/less progressive disclosure-->
<script >
$(document).ready(function () 
    $('div.view').hide();
    $('div.slide').toggle(function () 
        this.style.background = '#7D4F4E';
        $(this).text('less...').siblings('div.view').fadeIn('fast');
    , function () 
        this.style.background = '#B0B07F';
        $(this).text('more...').siblings('div.view').fadeOut('fast');
    );
);
</script> 

它工作正常，但我会使用下面的那个，我希望这个 jquery 脚本具有相同的文本更改（对于按钮）。如何将上述代码中的文本更改应用于底部的新脚本？

<!--a real good progressive disclosure-->
<script type="text/javascript">
$(document).ready(function () 
    $('.mover').hide();
    $('#slideToggle').click(function () 
        $(this).siblings('.mover').slideToggle();
    );
    $('.toggleSlow').click(function () 
        $(this).siblings('.mover').toggle('normal');
    );
    $('#fadeInOut').toggle(function () 
        $(this).siblings('.mover').fadeIn('normal');
    , function () 
        $(this).siblings('.mover').fadeOut('normal');
    );
    $('#animate').click(function () 
        $(this).siblings('.mover').slideDown(5500).fadeOut(7300);
    );
);
</script> 

【问题讨论】：

如果不知道页面上有哪些元素，这真的很令人困惑。具体来说，第二个脚本中按钮的类/ID 是什么？

（显示 - 隐藏）

/* 渐进式披露 */ .pusherbackground:#3B6670;颜色：#F0E3C0;光标：指针；显示：表格；填充：3px 8px；字体粗细：900；字体大小：16px；字体粗细：粗体；显示：内联；浮动：对；明确：两者； -moz-边界半径：10px； -webkit-border-radius:10px;边框半径：10px；边距顶部：0；边距底部：10px; .pusher:hover背景:#0D1F30

【参考方案1】：

我会试一试：

编辑后在toggle() 函数中包含回调：

$(document).ready(function() 
    $('.mover').hide();
    $('#slideToggle').click(function() 
        $(this).siblings('.mover').slideToggle();
    );
    $('.toggleSlow').click(function() 
        var $mover = $(this).siblings('.mover');
        var toggler = this;
        var text;
        $mover.toggle('normal', function() 
            text = ($mover.is(':visible')) ? 'Hide' : 'Show';
            $(toggler).text(text);
        );

    );
    $('#fadeInOut').toggle(function() 
        $(this).siblings('.mover').fadeIn('normal');
    ,
    function()
    
        $(this).siblings('.mover').fadeOut('normal');
    );
    $('#animate').click(function() 
        $(this).siblings('.mover').slideDown(5500).fadeOut(7300);
    );
);

【讨论】：

dw.即使文本被收回（或展开），文本也会变为“隐藏”并保持“隐藏”。要查看此内容，请访问：communitychessclub.com/gentle_wiki 并单击任何“（显示 - 隐藏）”按钮。如果找到解决方案，我将编辑初始显示隐藏文本。

好吧，隐藏效果发生得不够快。现在试一试（上面编辑过）。

感谢您的帮助。是否可以为其他功能添加相同的文本切换？我想让它适用于 slideToggle toggleSlow fadeInOut。我尝试手动修复它，更改了一些变量，但我认为更复杂的模块化解决方案是理想的；也就是说......我们可以让文本切换与所有三种文本效果一起使用吗？

dw.我将 slideToggle 从一个 ID 更改为一个类，因此我可以重新使用它并且文本不会切换。而且看起来很生涩。这不可能解决吗？