Jquery Basic Вопрос для начинающих: Как сделать мою функцию многоразовой? - PullRequest
Новая
       6

Jquery Basic Вопрос для начинающих: Как сделать мою функцию многоразовой?

2 голосов
/ 20 апреля 2010

Последние несколько часов я пытался сделать это самостоятельно и с помощью Google нашел решение, но безрезультатно.

Так что, если вы можете помочь, я был бы очень признателен!

По сути, у меня есть страница с 3 отдельными биографиями в «режиме предварительного просмотра», которая показывает только первый абзац каждой биографии.

Когда вы нажимаете «читать дальше» для одной биографии, открывается «полный режим».

То, что происходит в данный момент, это то, что если я нажму на одну ссылку «читать дальше», она откроет полный режим для всех 3 био.

Как мне отредактировать следующий код так:

  • Открывается только полный режим био ссылки, по которой я нажимаю
  • Сделайте его многоразовым, чтобы мне не приходилось дублировать код 3 раза для каждой био

код: 

$("a#btnReadMore").click(function() {
    $('.readMoreSlider').slideToggle("fast");
    $(this).toggleClass("readMoreSliderActive"); 
    return false;
});

Спасибо за вашу помощь!

Ответы [ 2 ]

1 голос
/ 20 апреля 2010

Это зависит от того, как выглядит ваша разметка. Идентификаторы должны быть уникальными. Я собираюсь предположить: 

<div class="bio">
  <p>...</p>
  <a class="readMore" href="#">read more</a>
  <div class="more">
    <p>...</p>
    <p>...</p>
    <p>...</p>
  </div>
</div>

с CSS: 

div.more { display: none; }

и Javascript: 

$(function() {
  $("a.readMore").click(function() {
    $(this).next("div.more").slideToggle();
    return false;
  });
});
0 голосов
/ 20 апреля 2010 
$("a.btnReadMore").click(function(){ 
//--^ - Make 'btnReadMore' a CSS class, not an ID

  // with this you reference *all* elements of class 'readMoreSlider', 
  // but you want only a single one
  $('.readMoreSlider').slideToggle("fast"); 

  // this should be okay
  $(this).toggleClass("readMoreSliderActive"); 
  return false; 
});

Итак, если у вас есть, гипотетически: 

<div class="bio">
  <div class="readMoreSlider">The bio Text...</div>
  <a class="btnReadMore">Read more</a>
</div>

Вам понадобится эта модификация, чтобы найти правильный readMoreSlider для определенного клика. 

$(this).parent('.bio').find('.readMoreSlider').slideToggle("fast");

В зависимости от вашей фактической разметки, ваши могут выглядеть немного иначе.

...