1

我正在使用响应式幻灯片,它仅使用数字作为图像下方的导航。我需要用文本替换数字。我目前将文本作为图像替代,但我在定位文本时遇到了很多麻烦。我对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。有什么建议么?


更新:

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


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

4

3 回答 3

2

只需删除 n 并通过使用获取 alt 属性.attr(name)。在$(this)你的.each循环中引用当前项目,使用它来获取属性:

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

     // ...
 });
 // ...
于 2012-11-14T15:26:17.520 回答
2

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

演示

  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(""));
于 2012-11-14T15:28:31.867 回答
0

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

于 2012-11-14T15:39:33.177 回答