3

私は可能だと思われる何かに行き詰まってしまいました.2日間それを理解することができませんでした.

私は.jsファイルにこれを持っています:

Mousetrap.bind('right', function() { $('li.active').next().click();  });
Mousetrap.bind('left', function() {  $('li.active').prev().click(); });

上記は、 keypress で UL 内のすべての LI を移動するために、キーボードの右/左をバインドしています。

次に、これを HTML に含めます。これは 2 つの UL です。

現時点では、最初の UL の最後の項目をヒットすると停止します。次の UL の次の LI にジャンプするようにしようとしています。

nextAll() - 複数のリスト トラバーサルの使用方法を理解しようとしましたが、役に立ちませんでした。誰かアイデアはありますか?

<div class="item active">
<ul class="thumbnails">
  <li class="trigger active" data-target="0" data-fieldclass="data1">
    <p class="image"><img src="images/sias-duplessis.jpg" alt="Sias Du Plessis"></p>
    <p>@siasduplessis</p>
    <p>#RedFury</p>
  </li>
  <li class="trigger" data-target="1" data-fieldclass="data2">
    <p class="image"><img src="images/lance-witten.jpg" alt="Lance Witten"></p>
    <p>@LanceTheWitten</p>
    <p>#pegasus</p>
  </li>
  <li class="trigger" data-target="2" data-fieldclass="data3">
    <p class="image"><img src="images/sasha.jpg" alt="Sasha Martinengo"></p>
    <p>@F1sasha</p>
    <p>#BallztotheWallz</p>
  </li>
  <li class="trigger" data-target="3" data-fieldclass="data4">
    <p class="image"><img src="images/sipho.jpg" alt="Comrade Sipho"></p>
    <p>@comradesipho</p>
    <p>#badexample</p>
  </li>
  <li class="trigger" data-target="4" data-fieldclass="data5">
    <p class="image"><img src="images/carl-wastie.jpg" alt="Carl Wastie"></p>
    <p>@carlwastie</p>
    <p>#FrickinHORSome</p>
  </li>
</ul>
</div>

<div class="item">
<ul class="thumbnails">
  <li class="trigger" data-target="5" data-fieldclass="data6">
    <p class="image"><img src="images/craig-stack.jpg" alt="Craig Stack"></p>
    <p>@Craig_Stack</p>
    <p>#eldiablo</p>
  </li>
  <li class="trigger" data-target="6" data-fieldclass="data7">
    <p class="image"><img src="images/cale-pisarra.jpg" alt="Cale Pisarra"></p>
    <p>@calepissarra</p>
    <p>#thedirtyseagull</p>
  </li>
  <li class="trigger" data-target="7" data-fieldclass="data8">
    <p class="image"><img src="images/mr-cpt.jpg" alt="Mr Cape Town"></p>
    <p>@MrCPT</p>
    <p>#goodoak</p>
  </li>
  <li class="trigger" data-target="8" data-fieldclass="data9">
    <p class="image"><img src="images/life-is-savage.jpg" alt="Life Is Savage"></p>
    <p>@LifeisSavage</p>
    <p>#whoyourdaddy</p>
  </li>
  <li class="trigger" data-target="9" data-fieldclass="data10">
    <p class="image"><img src="images/brent-graham.jpg" alt="Brent Graham"></p>
    <p>@BrentGraham</p>
    <p>#thefalcon</p>
  </li>
</ul>

4

5 に答える 5

1

どうですか：

Mousetrap.bind('right', function() {
    if ($('li.active').is(':last-child'))
        obj = $('li.active').parents('ul').next('ul').find('li').first();
    else obj = $('li.active').next();
    obj.click();
});
于 2013-06-25T12:50:32.910 に答える
1

「data-target」属性を参照として参照できます。

マークアップの末尾が欠落している可能性もあります。

Mousetrap.bind('right', function() {
  new_active_li = $('ul li[data-target^="' + (parseInt($('ul li.active').attr('data-target')) + 1) +'"]');
  $('ul li').removeClass('active');
  new_active_li.addClass('active');
  new_active_li.click();
});
Mousetrap.bind('left', function() {
  new_active_li = $('ul li[data-target^="' + (parseInt($('ul li.active').attr('data-target')) - 1) +'"]');
  $('ul li').removeClass('active');
  new_active_li.addClass('active');
  new_active_li.click();
});
于 2013-06-25T18:33:59.747 に答える
0

簡単なテストだけで次のようなトリックが実行されます

var test = $("ul li.last").next().html();
if(test == 'undefined'){
    // jump to next list
    var nextList = $("li.active").parent().parent().next().find("ul");
}else{
    // the normal code
}
于 2013-06-25T19:10:57.957 に答える