如何为flex分页导航的静态<a>标签动态追加title属性？

看起来你已经有了FlexSlider分页控件的基础代码框架，现在想把原本静态的title="#IR201800"改成动态生成的内容对吧？我给你补全完整的实现方案，分两种常见场景来写：

场景1：根据分页索引生成递增的Title（比如#IR201801、#IR201802...） #

这种适合你想让每个分页的Title按序号递增的情况，代码如下：

function appendTitles() {
  // 遍历每个分页项
  $(".flex-control-paging li").each(function(index) {
    // index从0开始，+1后补零保证两位数格式
    const dynamicTitle = `#IR2018${String(index + 1).padStart(2, '0')}`;
    // 替换当前li下a标签的title属性
    $(this).find("a").attr("title", dynamicTitle);
  });
}

// 确保在DOM或FlexSlider初始化完成后执行
$(document).ready(function() {
  // 假设你的FlexSlider初始化代码如下（已有则无需重复）
  $('.slides').flexslider({
    // 你的滑块配置项
    start: function() {
      // 滑块初始化完成后再设置title，避免元素未加载
      appendTitles();
    }
  });

  // 如果不需要等滑块初始化，DOM加载完成直接执行的话：
  // appendTitles();
});

代码细节说明： #

• each(function(index) { ... })：遍历每个分页li，index是当前项的索引（从0开始计数）
• String(index + 1).padStart(2, '0')：把序号转成两位数格式，比如索引0变成"01"，索引1变成"02"，保证和原格式统一
• attr("title", dynamicTitle)：直接替换掉原来的静态title值

场景2：根据对应Slide的自定义属性生成Title #

如果你的每个幻灯片（slide）里有自定义属性（比如data-slide-id="#IR201801"），可以把这个值同步给对应分页的Title，示例HTML结构如下：

<div class="slides">
  <div class="slide" data-slide-id="#IR201801">幻灯片内容1</div>
  <div class="slide" data-slide-id="#IR201802">幻灯片内容2</div>
  <div class="slide" data-slide-id="#IR201803">幻灯片内容3</div>
</div>

对应的JS实现代码：

function appendTitles() {
  // 收集所有slide的自定义属性值，转成数组
  const slideIds = $(".slides .slide").map(function() {
    return $(this).data("slide-id");
  }).get();

  // 遍历分页项，对应设置Title
  $(".flex-control-paging li").each(function(index) {
    if (slideIds[index]) {
      $(this).find("a").attr("title", slideIds[index]);
    }
  });
}

// 同样在滑块初始化完成后调用
$(document).ready(function() {
  $('.slides').flexslider({
    start: function() {
      appendTitles();
    }
  });
});

代码细节说明： #

• map(function() { ... }).get()：把所有slide的data-slide-id值收集成一个数组，方便后续对应分页项
• 遍历分页li时，用当前索引匹配对应slide的id，保证分页和幻灯片的关联正确性

额外小需求：如果只是想追加内容而非替换 #

要是你不想完全替换原title，而是在原有基础上追加信息（比如变成#IR201800 - 第1页），可以改成这样：

$(".flex-control-paging li").each(function(index) {
  const originalTitle = $(this).find("a").attr("title");
  $(this).find("a").attr("title", `${originalTitle} - 第${index + 1}页`);
});

内容的提问来源于stack exchange，提问作者Raj SOni