jQuery затруднительное положение с $ (this) .next или $ (this) .parent - PullRequest
Новая
       14

jQuery затруднительное положение с $ (this) .next или $ (this) .parent

1 голос
/ 24 ноября 2011

Использование: 

$(document).ready(function(){
    $("a.toggle").removeClass('hide'); 
    $('p.extra_text').hide();
    $('a.toggle').click(function() {
        $(this).parent('div.bios').next('p.extra_text').slideToggle("slow", function(){ 
            $('a.toggle').text(function (index, text) {
                return (text == 'Read More . . .' ? 'Read Less . . .' : 'Read More . . .'); 
            });
        });    
        return false;
    });
});

с: 

<div class="bios">      
  <p><strong>A Nobody</strong></p>
  <p>A Nobody live in Anywhere, USA.<a class="toggle hide">Read More . . .</a></p>
  <p class="extra_text">Wonder who A Nobody really is?  Well, we do too!</p>    

  <p><strong>A Nobody</strong></p>
  <p>A Nobody live in Anywhere, USA.<a class="toggle hide">Read More . . .</a></p>
  <p class="extra_text">Wonder who A Nobody really is?  Well, we do too!</p>    
 </div><!--/bios-->

При нажатии любой a class="toggle" все p class="extra_text" slideToggle.Как связать каждый последующий a class="toggle" с его собственным p class="extra_text"?

Я видел другие ответы, использующие $(this).next или $(this).parent, но они терпят неудачу, потому что есть другой p перед p class="extra_text".Как мне лучше всего выбрать правильную, последовательную комбинацию a class="toggle" / p class="extra_text", не вызывая их всех с помощью моего Jquery?

Ответы [ 2 ]

1 голос
/ 24 ноября 2011

Вы хотите $(this).parent().next().

0 голосов
/ 24 ноября 2011

Как указал SLaks $(this).parent().next() - это то, что вы ищете, но ваша текстовая функция изменит каждый класс, вместо этого сделайте следующее: 

$('a.toggle').click(function() {
    var link = this;

    $(this).parent().next().slideToggle("slow", function() {
        $(link).text(function(index, text) {
            return (text == 'Read More . . .' ? 'Read Less . . .' : 'Read More . . .');
        });
    });
    return false;
});

Fiddle Demo: http://jsfiddle.net/KuQPP/

РЕДАКТИРОВАТЬ

Я обычно не захожу так далеко, чтобы объяснить, как что-то работает, но в этом случае картинки говорят громче, чем слова, и у меня было щедрое настроение. Я создал небольшую диаграмму того, почему ваш кодне работает и так работает.

Пояснительная схема

enter image description here

...