将数值更改为文本 - jQuery / NivoSlider答案

【问题标题】：Change Numeric Value to Text - jQuery / NivoSlider将数值更改为文本 - jQuery / NivoSlider
【发布时间】：2011-11-14 21:13:37
【问题描述】：

我正在尝试将下面示例中的数字导航更改为实际的文本链接。

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

如何使用NivoSlider 代码实现此目的？

我已将代码移至 JSFiddle：http://jsfiddle.net/JSNuU/，以防万一这更有帮助。

非常感谢您对此的帮助。

【问题讨论】：

该站点上没有真正的文档。在这种情况下，您可以尝试在 domready 之后使用 $('.nivo-control[rel="0"]').html('nemo');

标签： javascript jquery html slideshow nivo-slider

【解决方案1】：

不幸的是，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] )
})

【讨论】：

很棒的东西，Sinetheta！！！那工作得很好。非常感谢您花时间查看并提供帮助。出现绿色勾号:-)
吹毛求疵：如果同一页面上有两个滑块，这将产生不可预知的行为。
确实会的。但是，在这种（不太可能）的情况下，更具体地定位您的目标是一件简单的事情。如果有人想要更通用的解决方案，我很乐意提供；）

【解决方案2】：

插件似乎不支持这一点。但是，您可以在插件创建新标签后使用 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/

【讨论】：

【解决方案3】：

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>');

并不是说有人愿意花那么多时间来解决你只真正使用过一次或两次的问题。 ;)

如果这样做，请务必在事后重新压缩以提高下载速度。

【讨论】：