javascript - 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>

私はそれを見つけることができるようにナビゲーションに「ビット」を追加しました:)nは画像の正しい数を引っ張っています。もちろん、「ビット」を取り出して「n」を画像altに置き換える必要があります。助言がありますか？

---

アップデート：

私はこのプラグインを使用しています（自分でこのようなものを書けたらいいのに！）。alt属性をターゲットにした変数を追加しようとしましたが、すべて未定義で返されます。多分私はそれを間違った場所に置いていますか？

---

最終更新：変更を表示するために元のコードを変更しました。本当にありがとう！

Answer 1

nを削除し、を使用してalt属性を取得するだけ.attr(name)です。ループ内は現在のアイテムを参照し、それを使用して属性を取得し$(this)ます。.each

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

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

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

Answer 3

セレクターは次のようになります。 $('img[alt="Enable Your Brand"]')