7

次のメニューには、最大約 50 のアイテムと、ユーザーが前または次の都市に移動するために使用できる 2 つのリンクを含めることができます。この例では、4 つのアドレス リンクを示しています。

<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())
});

これにより、メニュー項目の 1 つをクリックすると、前と次の 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>

コードをあまり追加せずにこれを行う簡単な方法はありますか?

4

4 に答える 4

10

次を使用して、要素が最初の子か最後の子かをテストできます。

$(this).parent().is(":first-child");
$(this).parent().is(":last-child");

thisクリックされたことを参照する場合a、その親が最初の子か最後の子か、またはどちらでもないかをテストすることで、それがリストの最初のリンクか最後のリンクかをテストします。

さらに、これらの値を基に attribute-object-construction を作成できます。

$("#menu").on('click', 'a', function(event) {

   // Prevent link from taking us anywhere
   event.preventDefault();

   // We'll be referencing the parent numerous times
   var parent = $(this).parent();

   // Determine the new properties of the PREV link
   var prev = parent.is(":first-child") 
       ? { html: '<img src="/images/noentry.png" />', 
           title: null } 
       : { html: '<img src="/images/prev.png" /> Prev', 
           title: 'City ' + parent.prev().text() } ;

   // Determine the new properties of the NEXT link
   var next = parent.is(":last-child") 
       ? { html: '<img src="/images/noentry.png" />', 
           title: null } 
       : { html: '<img src="/images/next.png" /> Next', 
           title: 'City ' + parent.next().text() } ;

    // Set new attribtes of both PREV and NEXT
    $("#prev").attr( prev );
    $("#next").attr( next );

});​

#prevおよび#next要素の属性を必要に応じてさらに構築できます。

デモ: http://jsfiddle.net/MX94J/1/

于 2012-05-27T04:22:57.320 に答える
1

要素eltがその兄弟の最初の要素である場合、$(elt).prev().lengthになります0。
要素eltがその兄弟の最後の要素である場合、$(elt).next().lengthになります0。

于 2012-05-27T04:21:22.160 に答える
1

jQuery オブジェクトの長さがゼロであることを確認し、それに応じて対処できます。

$("#menu").on('click', 'a[href^="/City"]', 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', 'a[href^="/City"]', 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'));
});
于 2012-05-27T04:26:35.663 に答える
1

これを行う別の方法として、代わりにインデックスまたはプロパティを使用する次の方法があります。

http://jsfiddle.net/QrE6u/1/

var index = 0;
var nElements = $('#menu a').length;

$('#menu a').click(function(e) {
    e.preventDefault();
    index = $(this).parents('ul').find('a').index(this);
    if (index==0) {
       $('#prev img').attr('src', '/images/noentry.png');
    } 
    if (index==nElements-1) {
      $('#next img').attr('src', '/images/noentry.png');

    }
    alert(index);
});

    $('#prev').click(function() {
      index = (index - 1) % nElements;
      $('#menu a').eq(index).click();
    }); 
    $('#next').click(function() {
      index = (index + 1)% nElements;
      $('#menu a').eq(index).click();
    });
​
于 2012-05-27T04:31:57.507 に答える