0

id = menu の要素内のリンクのクリック イベントをチェックする次のコードがあります。

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

このコードが動作する HTML は次のようになります。

<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>

以下のように、画面の別の部分に 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>
4

1 に答える 1

2

do like を使用できます：

$("#menu").on('click', 'a[href^="/City"]', function (event) {
   event.preventDefault();
   if(jQuery(this).text() == 2) { // this check is not required if this functionality is required for any 'a' under #menu
      jQuery(this).closest('ul').find('li:first').find('a').css('color','yellow');
      jQuery(this).closest('ul').find('li:last').find('a').css('color','pink');
      $('#prev').prop('href', $(this).parent().prev().find('a').prop('href')).prop('title','City 1').css('color','red');
      $('#next').prop('href', $(this).parent().next().find('a').prop('href')).prop('title','City 3').css('color','green');
   }
});

フィドル

アップデート：

jQuery(this).parent().prev().find('a') // this will give prev a 

jQuery(this).parent().prev().find('a') // this will give next a

セカンドフィドル

于 2012-05-26T13:27:13.847 に答える