Функция jQuery .text() для расширения/сокращения области содержимого

Question

Я немного застрял с тех пор, как не получил знания в jQuery. Поблагодарили бы за любую помощь. У меня есть следующий сценарий, чтобы активировать расширяющуюся область содержимого:

$(document).ready(function(){ 
    $("a.moreExpand").click(function(){ 
     var myelement = $(this).attr("rel"); 
     $(myelement).slideToggle(function() { 
      $("a.moreExpand").text(
       $(this).is(':visible') ? "LESS -" : "MORE +" 
      ); 
      }); 
    }); 
}); 

Мой HTML (используется в разных местах на странице):

<div class="moreExpandWrapp"> 
    <a href="javascript:void(0)" rel="#aboutExpand" class="moreExpand">MORE <span class="plus">+</span></a> 
    <div class="moreExpandContent" id="aboutExpand"> 
     Lorem ipsum dolor sit amet ... 
    </div> 
</div> 

До сих пор так хорошо, но как только я расширяю/контракт содержание все тексты (текст БОЛЬШЕ/МЕНЬШЕ) изменены на веб-сайте. Я пытался целевой сценарий, как это:

$(document).ready(function(){ 
    $("a.moreExpand").click(function(){ 
     var myelement = $(this).attr("rel"); 
     $(myelement).slideToggle(function() { 
      $("a.moreExpand", this).text(
       $(this).is(':visible') ? "LESS -" : "MORE +" 
      ); 
      }); 
    }); 
}); 

Так что: $("a.moreExpand", this).text( Но, конечно, это не поможет и заменить расширенное содержание текста вместо текста ссылки. Насколько я понимаю, это потому, что значение $ this это в основном целая область, а не кнопка.

Я хотел бы настроить таргетинг на копию ссылки вместо расширяющегося div, но я не уверен, как я могу использовать «$ this» в этом случае (вместо этого нацеливать первую часть функции).

Понравился бы ваш вклад на этом.

Спасибо!

Answer 1

Фактически, это в JavaScript относится к вашей текущей области.

внутри обратного вызова slideToggle, ваша область действия относится к «скользящему» элементу, поэтому это === myElement. Вы должны сохранить свою начальную ссылку, используя другой var.

http://jsfiddle.net/t4CQt/

$("a.moreExpand").click(function(){ 
    var myLink = this, 
     myelement = $(this).attr("rel"); 
    $(myelement).slideToggle('normal', function() { 
     $(myLink).text(
      $(this).is(':visible') ? "MORE +" : "LESS -" 
     ); 
    }); 
});