用JavaScript定位图像alt

Question

我使用的是一个响应性幻灯片，它使用的只是数字作为图片下方的导航线。我需要用文字代替数字。目前，我将文本作为图像alt，但我在针对文本时遇到了大量问题。我对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>

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

更新：

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

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

Answer 1

您有一个数组，但是连接了字符串。

演示

  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(""));

Answer 2

只需删除n并使用.attr(name)获取alt属性即可。$(this)循环中的.each引用当前项，使用它获取属性：

 // ...
 $slides.each(function() () {
     var n = $(this).attr('alt');

     // ...
 });
 // ...

Answer 3

您的选择器可能是这样的：$('img[alt="Enable Your Brand"]')