我有这个旧的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>
答案 0 :(得分:0)
我会试一试:
编辑为在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);
});
});