2

ナビゲーション用のキーボードをサポートしているリストがあります。ただし、リスト内のアイテムを表示および非表示にする追加のジゲリーポケリー（この例には含まれていません）があります。アイテムが非表示になった後、キーボードナビゲーションは機能し続ける必要がありますが、表示されているアイテムに対してのみです。

私はこれがうまく機能しています。この問題は、最後に表示されたアイテムが現在のアイテムであり、ユーザーがもう一度押したときに発生します。現在のクラスが削除され、存在しないアイテムに移動しようとします。ナビゲートするときにも同じことが起こります。

表示されているアイテムのみをナビゲートして、最初と最後の表示されているアイテムで停止させるにはどうすればよいですか？

jQuery(document).keydown(function(e) {

  e.preventDefault();

  if (e.keyCode == 38) { // Capture Arrow Up key 38

    var currentItem = jQuery(".options").children("li.current").removeClass("current").prevAll(':visible:first').addClass("current");

  } else if (e.keyCode == 40) { // Capture Arrow Down key 40


    var currentItem = jQuery(".options").children("li.current").removeClass("current").nextAll(':visible:first').addClass("current");
  }
});
.current {
  border: solid 1px #f60 !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul class="options">
  <li class="current"><a href="#"><span>WW Portfolio Regions</span><span class="hidden">0</span></a>
  </li>
  <li><a href="#"><span>EMEA</span><span class="hidden">1</span></a>
  </li>
  <li><a href="#"><span>Americas</span><span class="hidden">2</span></a>
  </li>
  <li><a href="#"><span>AP</span><span class="hidden">3</span></a>
  </li>
  <li><a href="#"><span>NE IOT</span><span class="hidden">4</span></a>
  </li>
  <li><a href="#"><span>SW IOT</span><span class="hidden">5</span></a>
  </li>
  <li><a href="#"><span>CCE IOT</span><span class="hidden">6</span></a>
  </li>
  <li><a href="#"><span>MEA IOT</span><span class="hidden">7</span></a>
  </li>
</ul>

4

1 に答える 1

1

現在の要素が最後の要素である場合、nextAll（）は空のjQueryオブジェクトを返します。その場合をテストし、最初（または最後）の要素でない場合にのみ、現在の要素からクラスを削除できます。

jQuery(document).keydown(function(e) {
    var currentItem = jQuery(".options").children("li.current");
    if (e.keyCode == 27) {         // Capture Esc key 27
        e.preventDefault();
        closeOptions(ddOptions, thisDd);
    } else if (e.keyCode == 38) {  // Capture Arrow Up key 38
        e.preventDefault();         
        var prevItem = currentItem.prevAll(":visible:first");
        if (prevItem.length) {
            currentItem.removeClass("current");
            prevItem.addClass("current");
        }
    } else if (e.keyCode == 40) {  // Capture Arrow Down key 40
        e.preventDefault();         
        var nextItem = currentItem.nextAll(":visible:first");
        if (nextItem.length) {
            currentItem.removeClass("current");
            nextItem.addClass("current");
        }
    }
});
于 2011-07-01T10:05:19.010 に答える