我有以下菜单,其中最多可以包含大约 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>
有没有一种简单的方法可以在不添加太多额外代码的情况下做到这一点?