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”并用图像alt替换“n”。有什么建议吗？

更新

我正在使用this插件（希望我能自己写这样的东西！）。我已经尝试添加变量定位alt属性，但它们都返回undefined。也许我把它放在错误的地方？

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

Answer 1

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

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

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

Answer 2

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

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

Answer 3

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

使用JavaScript来定位图像alt

3 个答案: