使用 jQuery 自定义 JavaScript 分页元素的标签

Question

这是未经编辑的脚本：

// for each slide create a list item and link
control.children().each(function(){
    $('.' + option.paginationClass, elem).append('<li><a href="#'+ number +'">'+ (number+1) +'</a></li>');
    number++;
});

这是分页脚本的一部分。脚本的这种作用将标记附加到幻灯片中的每个幻灯片链接，首先将第一个链接标记为“1”，然后为每个附加的幻灯片链接添加 1；因此，创建一组导航链接来控制幻灯片。我有四张幻灯片，所以链接列表看起来像：'1 2 3 4'...我相信您已经知道“分页”是什么...

我该怎么做：我希望能够编辑上述脚本以在每个幻灯片链接附加时输出特定的特定标记（而不是'1 2 3 4'强>）。以下是我的脚本编辑版本，其中混入了一些伪代码。您可以阅读它以获得更好的想法。

这是我自定义每个单独链接的尝试：

// for each slide create a list item and link
control.children().each(function(){

     if (number = 1) {LABEL = 'Link for slide 1 blah'}
     if (number = 2) {LABEL = 'Lnk for slide 2 boo'}
     if (number = 3) {LABEL = 'Link fore slide 3 foo'}
     if (number = 4) {LABEL = 'Linkage fo slide 4 yoooou'}

     $('.' + option.paginationClass, elem).append('<li><a href="#'+ number +'">'+ (LABEL) +'</a></li>');
     number++;
});

这是一个在没有可视化演示的情况下提出的棘手问题，但具有出色 JavaScript/jQuery 技能的人肯定可以看到缺少的内容或需要添加的行。这将有助于大量 UI / UX 开发人员想要更轻松地自定义分页链接以进行基本导航甚至幻灯片放映。提前致谢！

Answer 1

嗯，你是在设置值而不是比较它们，所以你所有的if 语句都是true，更改：

 if (number = 1) {LABEL = 'Link for slide 1 blah'}

收件人：

 if (number === 1) {LABEL = 'Link for slide 1 blah'}

注意each函数的第一个参数是index，所以不需要使用++操作符。

control.children().each(function(number){

你也可以定义一个数组：

var labels = [
    'The First Label',
    'Second One',
    '...'
];

和代码：

 $('.' + option.paginationClass, elem)
   .append('<li><a href="#'+ number +'">'+ labels[number] +'</a></li>');