-1

背景ページごとに一連の画像があり、配列を使用して、クリックしたメニュー項目に基づいて各画像を読み込みます。メニュー項目にもサブメニューがあり、メニューシステム全体が配列項目と「同期」している必要があります。

htmlメニュー：

Home (page 1) (menu item hidden but should be "Menu 1" if it would be displayed)

 <ul id="menu">
    <li><a href="page2">Menu 2</a></li>
    <li><a href="page3">Menu 3</a> 
          <ul id="sub-menu">
               <li><a href="page4">Menu 4</a></li>
          </ul>
    </li>
    <li><a href="page5">Menu 5</a></li>
 </ul>

配列：

[0] 1.jpg (image for the home where the menu name item isn't displayed)
[1] 2.jpg (this should be for Menu 2)
[2] 3.jpg (this should be for Menu 3)
[3] 4.jpg (this should be for Menu 4)
[4] 5.jpg (this should be for Menu 5)

サイトが読み込まれると、ホームページ用の[0]1.jpgと表示されます。ただし、最初にクリックできる項目は「メニュー2」です。メニューに「ホーム」ボタンが表示されていないため、[1]2.jpgに移動する必要があります。

これは私が使用するjQueryです：

jQuery (function($) {
  $("#menu .menu li").each(function (index) {
    var item = $(this);
    $("a", item).click(function (e) {
        e.preventDefault();
        api.goTo(index+1);
    });
   });
});

「api.goTo（index + 1）;」を使用 （ここで超大型プラグインを使用）メニュー項目の最初のクリックで言っている（または私はそうだと思う）、[1]であるはずのindex + 1に移動しますが、そうではなく、まだ残っているようですホームページに使用される[0]。また、ネストされたアイテムは引き続きインデックスシーケンスに従います。

基本的に、正しいページの正しい画像を取得できません。クリックしたメニュー項目に従って配列をナビゲートしていないようです。

この場合のPsインデックスは、jqueryループ内のアイテムの0ベースのインデックスです。

4

1 に答える 1

1

何をしているのかわかりませんが、変数を使用してループ内でクリック関数をバインドしているため、変数が変更され、結果が期待どおりになりません。

多分これは役立つでしょうか？

$('a', 'li').on('click', function(e) {
     e.preventDefault();
     var index = this.href.replace('page', '');
     api.goTo(index);
});

サブメニューのおかげで、クリック時に href から正しい番号を取得するのが最も簡単なようです。

配列内の値を参照するときは、次のことを行います。

var index = ['1.jpg', '2.jpg', '3.jpg'] //an array, starts with zero

var firstimage = index[0]; //this variable is now the string "1.jpg"

関数に数値を渡すだけapi.goTo(number)で、その関数は配列内の画像リンクを見つけていると思いますが、少なくともそれは私にはどのように見えますか?

于 2012-05-21T16:42:56.020 に答える