更改数值为文本- jQuery / NivoSlider

Change Numeric Value to Text - jQuery / NivoSlider

本文关键字：jQuery NivoSlider 文本      更新时间：2023-09-26

我试图改变数字导航，在下面的例子中，为实际的文本链接。

所以'1'可以是'Football', '2'可以是'Ice Hockey'，等等…

我如何使用NivoSlider代码实现这一点?

我已经将代码移动到JSFiddle: http://jsfiddle.net/JSNuU/，以防这样更有帮助。

遗憾的是，Nivo没有提供一个钩子来控制导航，而是用一系列图像代替它。这些数字是硬编码的:

nivoControl.append('<a class="nivo-control" rel="'+ i +'"><img src="'+ child.attr('rel') + '" alt="" /></a>');

如果你愿意，你可以在事后更改它们:jsFiddle

var navNames = ['one','two','three','four'];
jQuery('.nivo-control').each(function(i){
    $(this).text( navNames[i] )
})

插件似乎不支持这个。但是，你可以使用jQuery循环在插件创建新标签后插入它们:

jQuery('.nivo-controlNav').each(function() { // in case there's more than one
    var arrLinks = ['one','two','three','four'];
    jQuery(this).children('a').each(function(i,el) {
        jQuery(el).text(arrLinks[i]);
    });
});
http://jsfiddle.net/mblase75/JSNuU/5/

nivo不支持此功能，但快速查看未压缩的源代码后，可以轻松添加此功能。在检查拇指是否被切换后的第168行，有这样一行:

nivoControl.append('<a class="nivo-control" rel="'+ i +'">'+ (i + 1) +'</a>');

可以这样修改:

nivoControl.append('<a class="nivo-control" rel="'+ i +'">'+ kids.eq(i).attr("title") +'</a>');

或alt或name甚至数据属性:

nivoControl.append('<a class="nivo-control" rel="'+ i +'">'+ kids.eq(i).data("caption") +'</a>');

没有人愿意花那么多时间来修复你只使用一两次的东西。;)

如果你这样做，一定要在事后重新压缩它，以提高下载速度。

相关文章：