我有以下菜单,其中可以包含最多约50个项目和两个链接,用户可以使用这些链接导航到上一个或下一个城市.在这个例子中,我只显示了四个地址链接.
<ul id="menu"> <li><a href="/City/0101004H">1</a></li> <li><a href="/City/0101004I">2</a></li> <li><a href="/City/0101004J">3</a></li> <li><a href="/City/0101004K">4</a></li> </ul> <a id="prev" href="#"><img width="16" height="16" src="/images/prev.png">Prev</a> <a id="next" href="#"><img width="16" height="16" src="/images/next.png">Next</a>
我在堆栈溢出方面有一些帮助,并提出了以下代码：
$("#menu").on('click','a[href^="/City"]',function(event) {
event.preventDefault();
var prev = $(this).parent().prev().find('a');
var next = $(this).parent().next().find('a');
$('#prev').prop('href',jQuery(prev).prop('href')).prop('title','City ' + jQuery(prev).text());
$('#next').prop('href',jQuery(next).prop('href')).prop('title','City ' + jQuery(next).text())
});
当我单击其中一个菜单项时,这会将上一个和下一个的href设置为适当的值.它可以工作但不适用于列表中的第一个和最后一个项目.我需要的是这个：
a)当点击第一个项目时,我希望#prev更改为：
<a id="prev" href="#"><img src="/images/noentry.png"></a>
b)当点击最后一项时,我希望#next更改为：
<a id="next" href="#"><img src="/images/noentry.png"></a>
解决方法
您可以将jQuery对象长度检查为零并相应地执行操作：
$("#menu").on('click',function(event) {
event.preventDefault();
var pHref,nHref,pTitle,nTitle;
var prev = $(this).parent().prev().find('a');
var next = $(this).parent().next().find('a');
if (prev.length == 0) {
pHref = "#";
pTitle = "";
} else {
pHref = prev.prop('href');
pTitle = prev.prop('City' prev.text());
}
if (next.length == 0) {
nHref = "#";
nTitle = "";
} else {
nHref = next.prop('href');
nTitle = next.prop('City' prev.text());
}
$('#prev').prop('href',pHref).prop('title',pTitle);
$('#next').prop('href',nHref).prop('title',nTitle)
});
还是一个有本地功能的小清洁工来做这项工作：
("#menu").on('click',function(event) {
function setProps(targetSelector,srcObject) {
var href,title;
if (srcObject.length) {
href = srcObject.prop('href');
title = srcObject.prop('title');
} else {
href = "#";
title = "";
}
$(targetSelector).prop('href',href).prop('title',title);
}
event.preventDefault();
var p = $(this).parent();
setProps('#prev',p.prev().find('a'));
setProps('#next',p.next().find('a'));
});
