[英]issue with choosing li elements using the arrow keys in javascript or jquery
我一直在嘗試永遠做到這一點,但我不知道怎么做。 基本上,我在下面的代碼中生成li元素並將其附加到已經存在的ul中。
$(document.body).on("keyup", "", ".menuSearch", function (e) {
if (e.keyCode != 37 && e.keyCode != 38 && e.keyCode != 39 && e.keyCode != 40) {
$(".searchResults").html("");
var searchField = $(".menuSearch").val();
var expression = new RegExp(searchField, "i");
HidingShowingUlForSearch();
$.each(finalJsonForMenu, function (key, value) {
if (value.title.search(expression) != -1 || value.description.search(expression) != -1) {
$("#searchResults").append(
'<li class="list-group-item mickyMouseResultLi" style=" border:none; min-width: 95%;">' +
'<a target="_blank" href="' + value.url + '"</a>' +
'<p>' +
value.title + '</p>' + '</li>');
//+'<p style="color: #757373">' + value.description + '</p>'
}
});
}
});
這是通過以下代碼生成的HTML:
<ul class="list-group searchResults pre-scrollable mickyMouseUl" style="position: absolute; z-index: 13; border: 1px solid rgb(206, 206, 206); display: block;" id="searchResults">
<li class="list-group-item mickyMouseResultLi" tabindex="1" style=" border:none; min-width: 95%;">
<a target="_blank" href="testlink" <="" a="">
<p>APU/APIIT PAGOL</p>
</a>
</li>
<li class="list-group-item mickyMouseResultLi" tabindex="2" style=" border:none; min-width: 95%;">
<a target="_blank" href="testlink" <="" a="">
<p>APU B.Sc. Presentations</p>
</a>
</li>
<li class="list-group-item mickyMouseResultLi" tabindex="3" style=" border:none; min-width: 95%;">
<a target="_blank" href="testlink" <="" a="">
<p>APU Parking Guideline</p>
</a>
</li>
<li class="list-group-item mickyMouseResultLi" tabindex="4" style=" border:none; min-width: 95%;">
<a target="_blank" href="testlink" <="" a="">
<p>APU Documents</p>
</a>
</li>
<li class="list-group-item mickyMouseResultLi" tabindex="5" style=" border:none; min-width: 95%;">
<a target="_blank" href="testlink" <="" a="">
<p>APU Student Handbook</p>
</a>
</li>
<li class="list-group-item mickyMouseResultLi" tabindex="6" style=" border:none; min-width: 95%;">
<a target="_blank" href="testlink" <="" a="">
<p>APU B.Sc Presentations & EOS Interview/LCM Schedules - Management Console</p>
</a>
</li>
<li class="list-group-item mickyMouseResultLi" tabindex="7" style=" border:none; min-width: 95%;">
<a target="_blank" href="testlink" <="" a="">
<p>APU B.Sc Presentations & EOS Interview/LCM Schedules</p>
</a>
</li>
</ul>
現在,這很好,它也可以按我想要的方式工作,但是在li生成后,我必須使用Courser指向並單擊它們,而我需要一種方法,我可以只使用帶有輸入按鈕的箭頭鍵來訪問新產生的李氏。 有什么建議么?
首先,生成的鏈接錯誤<a target="_blank" href="testlink" <="" a="">
。 此<=""
不能為有效屬性。
第二點:我不知道您的代碼如何通過li
/ a
但是我嘗試從您的信息開始制定一個完整的工作解決方案。
我從這個答案中實現了一些代碼: https : //stackoverflow.com/a/8902976/4031083 。 顯然是針對上下文進行了編輯。
添加的新代碼是這樣的:
var liSelected;
$(window).keydown(function(e) {
var li = $('li');
if(e.keyCode === 40) {
if(liSelected) {
liSelected.removeClass('selected');
next = liSelected.next();
if(next.length > 0) {
liSelected = next.addClass('selected');
} else {
liSelected = li.eq(0).addClass('selected');
}
} else {
liSelected = li.eq(0).addClass('selected');
}
} else if(e.keyCode === 38) {
if(liSelected) {
liSelected.removeClass('selected');
next = liSelected.prev();
if(next.length > 0) {
liSelected = next.addClass('selected');
} else {
liSelected = li.last().addClass('selected');
}
} else {
liSelected = li.last().addClass('selected');
}
}
liSelected.find('a').focus();
});
希望這對您有所幫助。
因此,我已經使用javascript和以下步驟弄清楚了:
1-您必須獲取ul並獲取其第一個孩子,並為其添加ID:
var list = document.getElementById('searchResults'); // targets the<ul>
var first = list.firstChild; // targets the first <li>
first.setAttribute('id', 'selected');
2-然后您可以使用Document.boy on key up
並實現以下切換情況:
switch (e.keyCode) {
case 38: // if the UP key is pressed
var ulSelected = document.getElementById('searchResults');
var selected = document.getElementById('selected');
if (selected.previousSibling == null) {
break;
}
var newSelected = selected.previousSibling;
selected.removeAttribute('id');
newSelected.setAttribute('id', 'selected');
var searchBar = document.getElementById('menuSearch');
searchBar.value = selected.firstChild.innerText;
MickyAutoScroll(selected, ulSelected)
break;
case 40: // if the DOWN key is pressed
var ulSelected = document.getElementById('searchResults');
var selected = document.getElementById('selected');
if (selected.nextSibling == null) {
break;
}
var newSelected = selected.nextSibling;
selected.removeAttribute('id');
newSelected.setAttribute('id', 'selected');
var searchBar = document.getElementById('menuSearch');
searchBar.value = selected.firstChild.innerText;
MickyAutoScroll(selected, ulSelected)
break;
case 13:
var link = document.getElementById("selected");
link.firstChild.click();
break;
case 27:
var searchBar = document.getElementById("menuSearch");
searchBar.value = null;
break;
}
這基本上將上下移動,並使用輸入按鈕訪問li中的鏈接
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.