1

我有以下代码检查带有 id = menu 的元素内的链接上的点击事件：

$("#menu")
   .on('click', 'a[href^="/City"]', function (event) {
      event.preventDefault();
      $('#editLink').attr("data-href", link);
   });

此代码适用的 HTML 如下所示：

<ul class="controls-buttons question-grid" id="menu">
   <li class="question-grid"><a href="/City/0101004H">1</a></li>
   <li class="question-grid"><a href="/City/0101004I">2</a></li>
   <li class="question-grid"><a href="/City/0101004J">3</a></li>
   <li class="question-grid"><a href="/City/0101004K">4</a></li>
</ul>

我在屏幕的另一部分有两个链接，如下所示：

<a id="prev" href="#">Prev</a>
<a id="next" href="#">Next</a>

我怎样才能做到这一点，如果用户点击“2”链接，那么这些链接将更改为：

<a id="prev"  href="/City/0101004H" title="City 1">Prev</a>
<a id="next"  href="/City/0101004J" title="City 3">Next</a>

如果用户单击链接更改为的“1”：

<a id="prev"  href="#"></a>
<a id="next"  href="/City/0101004J" title="City 2">Next</a>

如果用户单击列表中的最后一个元素，则链接将更改为：

<a id="prev"  href="/City/0101004H" title="City 3">Prev</a>
<a id="next"  href="#"></a>

对我来说，最大的问题是如何检查当前链接之前或之后是否有链接。我知道基本的 jQuery，但我希望有人可以帮助我提出一些建议。

4

2 回答 2

0

我没有对此进行测试，但希望有用：

$('.question-grid a').click(function(){

   var number=parseInt($(this).html());

   if(number<2)
   {
      $('#prev').attr('href','#');
      $('#next').attr('href',$(this).next('a').attr('href');
   }else if(number>1 && number<4){
      $('#prev').attr('href',$(this).prev('a').attr('href'));
      $('#next').attr('href',$(this).next('a').attr('href'));  
   }else{
      $('#prev').attr('href',$(this).prev('a').attr('href'));
      $('#next').attr('href','#'); 
   }
});
于 2012-05-26T14:43:23.543 回答
0

我猜是这样的：

$("#menu").on('click', 'a[href^="/City"]', function(e) {
    e.preventDefault();
    $('#editLink').attr("data-href", $(this).attr('href'));
});

$('#prev, #next').on('click', function() {
    var isNext = this.id==='next',
        liNow = $('#editLink').attr("data-href") || $('#menu li:first a').attr('href'),
        nextA = $('a[href="'+liNow+'"]', '#menu').parent('li')[isNext?'next':'prev']('li').find('a');
    if (!nextA.length) nextA = isNext ? $('#menu li:last a') : $('#menu li:first a');
    nextA.trigger('click');
});

小提琴

于 2012-05-26T13:42:29.023 回答