jquery: nt-tipi oyunculuk ilginç

Div'leri yukarı ve aşağı kaydırmak için jQuery nth-of-type 'ı kullanıyorum ( slideToggle() ve tıklama() ). Sorun şu ki, sekmeleri açmak için olan şeylerden birine tıklamayı denediğimde açmıyorlar.

HTML:

<div id="tabs-wrapper">
    <div class="op">Tab One</div>
    <div class="op">Tab Two</div>
    <div class="op">Tab Three</div>
    <div class="tab">Pattern One</div>
    <div class="tab">Pattern One</div>
    <div class="tab">Pattern One</div>
</div>

js:

$('.tab').hide();
$('.op:nth-of-type(1)').click(function(){
    $('.tab:nth-of-type(1)').slideToggle();
});
$('.op:nth-of-type(2)').click(function(){
    $('.tab:nth-of-type(2)').slideToggle();
});
$('.op:nth-of-type(3)').click(function(){
    $('.tab:nth-of-type(3)').slideToggle();
});

Fiddle

1
Eşleşmeleri almak için, .tab: nth-of-type s öğelerinin her birine 3 ekleyin. >, 6 (ancak bu, 3 sekmeniz olduğunu bilmenizi gerektirir)
katma yazar Paul S., kaynak
Eşleşmeleri almak için, .tab: nth-of-type s öğelerinin her birine 3 ekleyin. >, 6 (ancak bu, 3 sekmeniz olduğunu bilmenizi gerektirir)
katma yazar Paul S., kaynak

10 cevap

The :nth-of-type() pseudo-class pays attention only to the element type. None of your "tab" elements are the first, second, or third <div> in their container, so none match the selector.

You could, I think, do this:

$('.op:nth-of-type(3n+1)').click(function(){
    $('.tab:nth-of-type(3n+1)').slideToggle();
});

You'd have to make sure that the 3 was updated when you add/remove a tab of course.

Alternatively you could do this:

$(".op").click(function() {
  $(".tab").eq($(this).index()).slideToggle();
});

Then you'd just need to set up one handler.

3
katma
Neden aşağı oy?
katma yazar max, kaynak
@ yak613 Cevabına birkaç fikir daha koydum; Ben de bir örnek jsfiddle üzerinde çalışıyorum :)
katma yazar Pointy, kaynak
@ yak613 iyi, bunu yapabilir veya 3 "op" elementinin varlığını hesaba katabilirsiniz. Şahsen tıklanabilir elemanlar ve sekmeler arasında daha açık bir ilişki kurmaya giderdim.
katma yazar Pointy, kaynak
Bunun neden indirileceği belli değil; Seçicinin neden hiçbir şeyle eşleşmediği hakkında söylenecek fazla bir şey yok.
katma yazar Pointy, kaynak
@ yak613 biri yanıtı reddetti.
katma yazar Pointy, kaynak
Hangi olumsuz yönden bahsediyorsun?
katma yazar Yaakov Ainspan, kaynak
$ ('# tabs-wrapper: nth-of-type (1)') kullanarak; çalışmıyor: keman
katma yazar Yaakov Ainspan, kaynak
Öyleyse $ ('# tabs-wrapper: nth-of-type (1)'); kullanmalı mıyım?
katma yazar Yaakov Ainspan, kaynak
Yanıtların tümü işe yarıyor , ancak yalnızca bir tanesini çözebiliyorum. =)
katma yazar Yaakov Ainspan, kaynak

The :nth-of-type() pseudo-class pays attention only to the element type. None of your "tab" elements are the first, second, or third <div> in their container, so none match the selector.

You could, I think, do this:

$('.op:nth-of-type(3n+1)').click(function(){
    $('.tab:nth-of-type(3n+1)').slideToggle();
});

You'd have to make sure that the 3 was updated when you add/remove a tab of course.

Alternatively you could do this:

$(".op").click(function() {
  $(".tab").eq($(this).index()).slideToggle();
});

Then you'd just need to set up one handler.

3
katma
Neden aşağı oy?
katma yazar max, kaynak
@ yak613 Cevabına birkaç fikir daha koydum; Ben de bir örnek jsfiddle üzerinde çalışıyorum :)
katma yazar Pointy, kaynak
@ yak613 biri yanıtı reddetti.
katma yazar Pointy, kaynak
@ yak613 iyi, bunu yapabilir veya 3 "op" elementinin varlığını hesaba katabilirsiniz. Şahsen tıklanabilir elemanlar ve sekmeler arasında daha açık bir ilişki kurmaya giderdim.
katma yazar Pointy, kaynak
Bunun neden indirileceği belli değil; Seçicinin neden hiçbir şeyle eşleşmediği hakkında söylenecek fazla bir şey yok.
katma yazar Pointy, kaynak
Hangi olumsuz yönden bahsediyorsun?
katma yazar Yaakov Ainspan, kaynak
Öyleyse $ ('# tabs-wrapper: nth-of-type (1)'); kullanmalı mıyım?
katma yazar Yaakov Ainspan, kaynak
$ ('# tabs-wrapper: nth-of-type (1)') kullanarak; çalışmıyor: keman
katma yazar Yaakov Ainspan, kaynak
Yanıtların tümü işe yarıyor , ancak yalnızca bir tanesini çözebiliyorum. =)
katma yazar Yaakov Ainspan, kaynak

Sivri cevabının açıklamasında açıklamanız var, ancak şimdiye kadarki çözümlere biraz varyasyon eklemek için bu yaklaşımı deneyebilirsiniz:

$('.op').click(function() {
  var pos = $(this).parent().indexOf($(this));
  $('.tab').eq(pos).slideToggle();
});

Bu yoğunlaşabilir, fakat daha okunaklı bir şekilde bıraktım, böylece ne yaptığını anlayabiliyorsunuz.

'Diyor': "Bana bu tıklanmış 'op' öğesinin üstündeki tüm diğer öğelerdeki konumunu al. Tüm 'sekme' öğelerini al ve SlideToggle 'ın konumuna karşılık gelen sekme öğesini al 'op' elemanı tıklandı. "

NOT: Bu, işaretlemenizdeki herhangi bir .op ve .tab öğelerini hedefleyecektir, daha belirgin hale getirmeyi seçebilirsiniz.

1
katma

Sivri cevabının açıklamasında açıklamanız var, ancak şimdiye kadarki çözümlere biraz varyasyon eklemek için bu yaklaşımı deneyebilirsiniz:

$('.op').click(function() {
  var pos = $(this).parent().indexOf($(this));
  $('.tab').eq(pos).slideToggle();
});

Bu yoğunlaşabilir, fakat daha okunaklı bir şekilde bıraktım, böylece ne yaptığını anlayabiliyorsunuz.

'Diyor': "Bana bu tıklanmış 'op' öğesinin üstündeki tüm diğer öğelerdeki konumunu al. Tüm 'sekme' öğelerini al ve SlideToggle 'ın konumuna karşılık gelen sekme öğesini al 'op' elemanı tıklandı. "

NOT: Bu, işaretlemenizdeki herhangi bir .op ve .tab öğelerini hedefleyecektir, daha belirgin hale getirmeyi seçebilirsiniz.

1
katma

nth-of-type seçicisi, yalnızca sınıf adına değil, öğe adına bağlı olarak ayrım yapar.

: nth-of-type (an + b) sözde sınıf notasyonu bir elementi temsil eder.   Ondan önce aynı genişletilmiş eleman adına sahip + b-1 kardeşleri var.   belge ağacında, n'nin sıfır veya pozitif tamsayı değeri için ve   bir ana öğeye sahiptir.    http://www.w3.org/TR/css3- seçiciler/# inci-of-tipi-pseudo

One alternative here is to use the jQuery :eq selector

$('.tab').hide();
$('.op:eq(0)').click(function(){
    $('.tab:eq(0)').slideToggle();
});
$('.op:eq(1)').click(function(){
    $('.tab:eq(1)').slideToggle();
});
$('.op:eq(2)').click(function(){
    $('.tab:eq(2)').slideToggle();
});

Çok daha zarif bir çözüm, .tab 'ı tıklanan .op ile aynı dizinde seçmek için jQuery.index kullanmak olacaktır.

$('#tabs-wrapper').on('click', '.op', function(){
    var $t = $(this), $tab;
    $tab = $t.siblings('.tab').eq($t.index());
    $tab.slideToggle();
});
1
katma

nth-of-type seçicisi, yalnızca sınıf adına değil, öğe adına bağlı olarak ayrım yapar.

: nth-of-type (an + b) sözde sınıf notasyonu bir elementi temsil eder.   Ondan önce aynı genişletilmiş eleman adına sahip + b-1 kardeşleri var.   belge ağacında, n'nin sıfır veya pozitif tamsayı değeri için ve   bir ana öğeye sahiptir.    http://www.w3.org/TR/css3- seçiciler/# inci-of-tipi-pseudo

One alternative here is to use the jQuery :eq selector

$('.tab').hide();
$('.op:eq(0)').click(function(){
    $('.tab:eq(0)').slideToggle();
});
$('.op:eq(1)').click(function(){
    $('.tab:eq(1)').slideToggle();
});
$('.op:eq(2)').click(function(){
    $('.tab:eq(2)').slideToggle();
});

Çok daha zarif bir çözüm, .tab 'ı tıklanan .op ile aynı dizinde seçmek için jQuery.index kullanmak olacaktır.

$('#tabs-wrapper').on('click', '.op', function(){
    var $t = $(this), $tab;
    $tab = $t.siblings('.tab').eq($t.index());
    $tab.slideToggle();
});
1
katma

: eq seçicisini de kullanabilirsiniz. Sonra, 0-2 (0'dan dizinlenmiş) beklendiği gibi elemanlar sayılır.

$('.tab').hide();
$('.op:eq(0)').click(function(){
    $('.tab:eq(0)').slideToggle();
});
$('.op:eq(1)').click(function(){
    $('.tab:eq(1)').slideToggle();
});
$('.op:eq(2)').click(function(){
    $('.tab:eq(2)').slideToggle();
});

http://jsfiddle.net/rm9mkoau/6/

Kısacası, eleman sayısına bağlı olarak değil.

$('.tab').hide();
$('.op').click(function(){
    $('.tab:eq(' + $(this).index() + ')').slideToggle();
});
http://jsfiddle.net/rm9mkoau/8/

1
katma
Downvoter, lütfen oyunuzu yorumlayın.
katma yazar panther, kaynak

: eq seçicisini de kullanabilirsiniz. Sonra, 0-2 (0'dan dizinlenmiş) beklendiği gibi elemanlar sayılır.

$('.tab').hide();
$('.op:eq(0)').click(function(){
    $('.tab:eq(0)').slideToggle();
});
$('.op:eq(1)').click(function(){
    $('.tab:eq(1)').slideToggle();
});
$('.op:eq(2)').click(function(){
    $('.tab:eq(2)').slideToggle();
});

http://jsfiddle.net/rm9mkoau/6/

Kısacası, eleman sayısına bağlı olarak değil.

$('.tab').hide();
$('.op').click(function(){
    $('.tab:eq(' + $(this).index() + ')').slideToggle();
});
http://jsfiddle.net/rm9mkoau/8/

1
katma
Downvoter, lütfen oyunuzu yorumlayın.
katma yazar panther, kaynak

Pointy'nin cevabını bir örnekle tamamlamak için:

$('.tab').hide();
$('.op:nth-of-type(1)').click(function(){
  $('div:nth-of-type(4)').slideToggle();
});
$('.op:nth-of-type(2)').click(function(){
  $('div:nth-of-type(5)').slideToggle();
});
$('.op:nth-of-type(3)').click(function(){
   $('div:nth-of-type(6)').slideToggle();
});
1
katma
Tamam, şimdi çalışıyor. Teşekkürler.
katma yazar Yaakov Ainspan, kaynak
Çalışıyor, ancak daha iyisi, başka bir sekme eklemek istediğimizde betiği değiştirmemiz gereken çözümler :-)
katma yazar panther, kaynak

Pointy'nin cevabını bir örnekle tamamlamak için:

$('.tab').hide();
$('.op:nth-of-type(1)').click(function(){
  $('div:nth-of-type(4)').slideToggle();
});
$('.op:nth-of-type(2)').click(function(){
  $('div:nth-of-type(5)').slideToggle();
});
$('.op:nth-of-type(3)').click(function(){
   $('div:nth-of-type(6)').slideToggle();
});
1
katma
Tamam, şimdi çalışıyor. Teşekkürler.
katma yazar Yaakov Ainspan, kaynak
Çalışıyor, ancak daha iyisi, başka bir sekme eklemek istediğimizde betiği değiştirmemiz gereken çözümler :-)
katma yazar panther, kaynak