javascript - 使用 JavaScript 定位图像 alt

Question

我正在使用仅使用数字作为图像下方导航的响应式幻灯片。我需要用文本替换数字。我目前将文字作为图像替代，但我在定位文字时遇到了很多麻烦。我对 JS 了解很少，我猜这是问题所在:)

这是寻呼机代码:

 //pager
 if (settings.pager) {
      var tabMarkup = [];
      $slide.each(function (i) {
        var n = i + 1;

        var images = $("#slider2 li img");

        tabMarkup +=
          "<li>" +
          "<a href='#' class='" + slideClassPrefix + n + "'>" + images.eq(i).attr("alt") + "</a>" +
          "</li>";
      });
      $pager.append(tabMarkup);

      $tabs = $pager.find("a");

      // Inject pager
      if (options.controls) {
        $(settings.controls).append($pager);
      } else {
        $this.after($pager);
      }

      // Select pager item
      selectTab = function (idx) {
        $tabs
          .closest("li")
          .removeClass(activeClass)
          .eq(idx)
          .addClass(activeClass);
      };
    }

图片如下:

 <ul class="rslides" id="slider2">
  <li><img src="1.jpg" alt="Alt Sample" /></li>
  <li><img src="2.jpg" alt="Unlock Your Potential" /></li>
  <li><img src="3.jpg" alt="Enable Your Brand" /></li>
  <li><img src="4.jpg" alt="Lean On Our Expertise" /></li>
</ul>

我在导航栏中添加了“位”，这样我就可以找到它 :) n 正在提取正确数量的图像。显然我需要取出“Bit”并将“n”替换为图像 alt。有什么建议吗？

---

更新:

我正在使用 this插件(希望我能自己写这样的东西!)。我试过添加针对 alt 属性的变量，但它们都未定义。也许我把它放在错误的地方？

---

最终更新:我修改了原始代码以显示更改。非常感谢!

Answer 1

你有一个数组但连接字符串

DEMO

  var tabMarkup = []; // an array
  var images = $("#slider2 li img");
  $slide.each(function (i) { // assuming $slide is a collection
    tabMarkup.push(
      "<li>" +
      "<a href='#' class='" + slideClassPrefix + (i+1) + "'>" + 
      (i+1) +":" +images.eq(i).attr("alt") +"</a>" +
      "</li>");
  });
  $pager.append(tabMarkup.join(""));