【问题标题】:How do I add text to jquery script button?如何将文本添加到 jquery 脚本按钮?
【发布时间】: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 是什么?
  • (显示 - 隐藏)
  • /* 渐进式披露 */ .pusher{background:#3B6670;颜色:#F0E3C0;光标:指针;显示:表格;填充:3px 8px;字体粗细:900;字体大小:16px;字体粗细:粗体;显示:内联;浮动:对;明确:两者; -moz-边界半径:10px; -webkit-border-radius:10px;边框半径:10px;边距顶部:0;边距底部:10px}; .pusher:hover{背景:#0D1F30}

标签: jquery disclosure progressive


【解决方案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 更改为一个类,因此我可以重新使用它并且文本不会切换。而且看起来很生涩。这不可能解决吗?
猜你喜欢
相关资源
最近更新 更多
热门标签