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>

以下のように、画面の別の部分に 2 つのリンクがあります。

<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

私はこのようなものを推測しています:

$("#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 に答える
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 に答える