"Bu" öğesinin üst öğesi öğesini seçmek için JQuery'yi kullanın (öğe tıklandı)

Question

Kullanıcı tıklatıldığında görüntüleri sola ve sağa döndürmek için bir karusel oluşturan bir jQuery komut dosyası var. İlk başta, tek bir sayfada birden fazla atlı karınca yerleştirmeyi planlamıyordum, ama şimdi ihtiyaç geldi.

Sorun, kullanıcı bir düğmeyi tıklattığında bir karuseli (tek tıklatıldığında) nasıl kullanacağımı bilmiyorum.

İşte senaryo doğru ya da herhangi bir atlıkarınca sol tıklayın Şu an itibariyle

$(function() 
{ 
    // Put last item before first item, in case user clicks left 
    $('.carousel li:first').before($('.carousel li:last')); 

    // Right click handler 
    $('.right-button img').click(function() 
    { 
     // Get width plus margins 
     var item_width = $('.carousel li').outerWidth() + (2 * parseInt($('.carousel li').css('margin-right'))); 

     // Get left indent 
     var orig_left_indent = $('.carousel').css('left'); 

     // Calculate new left indent 
     var left_indent = parseInt(orig_left_indent) - item_width; 

     $('.carousel:not(:animated)').animate({'left': left_indent}, 500, 'swing', function() 
     { 
      // Put first item after last item 
      $('.carousel li:last').after($('.carousel li:first')); 

      // Set left indent to default 
      $('.carousel').css({'left': orig_left_indent}); 
     }); 
    }); 

    // Left click handler 
    $('.left-button img').click(function() 
    { 
     // Get width plus margins 
     var item_width = $('.carousel li').outerWidth() + (2 * parseInt($('.carousel li').css('margin-right'))); 

     // Get left indent 
     var orig_left_indent = $('.carousel').css('left'); 

     // Calculate new left indent 
     var left_indent = parseInt(orig_left_indent) + item_width; 

     $('.carousel:not(:animated)').animate({'left': left_indent}, 500, 'swing', function() 
     { 
      // Put last item before first item 
      $('.carousel li:first').before($('.carousel li:last')); 

      // Set left indent to default 
      $('.carousel').css({'left': orig_left_indent}); 
     }); 
    }); 

    // Close button handler 
    $('.carousel-container .close-button img').click(function() 
    { 
     $('.carousel-container').fadeOut(1000); 
    }); 
}); 

, hepsini kayması. Tıklanan atlı karıncaya nasıl başvuru yapacağımı bilmiyorum. Oklar atlıkarınca alt öğeleridir çünkü

Bunu başarmak istiyorum nasıl heres HTML

<div class="carousel-container clearfix"> 
    <div class="header close-button"> 
     <strong>Check These Out</strong> 
     <?php echo html::image('media/images/close.gif'); ?></div> 
    <div class="left-button"><?php echo html::image('media/images/left_arrow.png'); ?></div> 
     <div class="carousel-inner"> 
      <ul class="carousel"> 
       <?php foreach ($items as $item): ?> 
       <li> ... </li> 
       <?php endforeach; ?> 
      </ul> 
     </div> 
    <div class="right-button"><?php echo html::image('media/images/right_arrow.png'); ?></div> 
</div> 

, ben, kullanıcının tıkladığı atlıkarınca başvurmak nasıl bilmiyorum.

DÜZENLEME: Cevaplar için teşekkürler. carousel = $(this).parent() çalışır, ancak atlı karınca olup olmadığını nasıl kontrol ederim: seçiciyi ve yeni atlı karınca değişkenini kullanarak animasyonlu mu?

$ (': animasyonlu', atlıkarınca)? Bir olay işleyicisi, değişkenin İçinde

Answer 1

:

$(this)

size çağrı elemanı alacak. Oradan, içeren div Üst() işlevini kullanabilirsiniz almak için: DOM yürümeye

$(this).parent()

kullanın.

Answer 2

.parent() işlevini kullanın, bir düzeye geçin. Kişisel kod aşağıdaki gibi görünebilir:

eylem etiketleri atlıkarınca içindeki ilk düzeyde iç içe

$('.right-button img').click(function() 
    { 
     carousel = $(this).parent(); 

     //bunch of code 
    } 

Answer 3

beri, bilmek her işlevin içinde yapabilirsiniz idi, ait:

var parent = $(this).parent().get(0); 

Will Aslında size şimdi kullanabileceğiniz ana nesneyi al.