Jquery Basic Débutant Question: Comment rendre ma fonction réutilisable?

Question

J'ai passé les dernières heures à essayer de le faire par moi-même, et en utilisant Google pour trouver une solution mais en vain. Donc, si vous pouvez aider, je l'apprécierais!

Fondamentalement, j'ai une page qui a 3 biographies distinctes en «mode aperçu», qui montre seulement le premier paragraphe de chaque bio.

Lorsque vous cliquez sur 'lire plus' pour une bio, il ouvre le 'mode complet'. Ce qui se passe en ce moment, c'est que si je clique sur un lien 'lire plus', cela ouvre le mode complet sur les 3 bio. Comment puis-je éditer le code suivant ainsi;

• Il ouvre seulement le mode plein bio du lien click sur
• Faites Je n'ai pas réutilisable afin de dupliquer le code 3 fois pour chaque bio

Code:

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

Merci pour votre aide!

Answer 1

Cela dépend de l'aspect de votre balisage. Les ID doivent être uniques. Je vais supposer:

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

avec CSS:

div.more { display: none; } 

et Javascript:

$(function() { 
    $("a.readMore").click(function() { 
    $(this).next("div.more").slideToggle(); 
    return false; 
    }); 
}); 

Answer 2

$("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; 
}); 

Donc, si vous avez, hypothétiquement:

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

Vous auriez besoin de cette modification pour trouver le bon readMoreSlider pour un certain clic.

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

En fonction de votre balisage actuel, votre apparence peut différer légèrement.