Jquery, ajoutez des boutons sous les éléments et rappelez-vous à quel élément le bouton appartient

Question

Veuillez consulter mon code ici

J'ai donc quelques éléments HTML textarea

<textarea id="area11ba" class="showEditor">1</textarea><br/>
<textarea id="area22ab" class="showEditor">2</textarea><br/>
<textarea id="area33cd" class="showEditor">3</textarea><br/>
<textarea id="area4fg">4</textarea><br/>
<textarea id="area55ed" class="showEditor">5</textarea><br/>

Et je veux ajouter un bouton "Editeur" sous chaque zone de texte qui a la classe "showEditor", puis lorsque les gens cliquent sur le bouton Editeur, il devrait alerter le contenu de cette zone de texte.

Voici ma tentative

$("textarea[class*='showEditor']").each(function(index) {

    textareaid = $(this).attr('id');
    buttonId = "editorButton" + index;
    editorButton = '<div class="editorButton"><a id="' + buttonId + '">Editor</a></div>';
    $(editorButton).insertAfter(this);

    that = this;

    $('#' + buttonId).click(function() {
        content = $('#'+ textareaid ).val();
        alert(content);
    });


});

Mais malheureusement, la valeur alertée est toujours 5, qui est le dernier élément défini.

Comment cela peut-il être fait correctement?

Merci

javascript jquery

0

Yasser1984 6 oct. 2011 à 22:57

Answer 1

Je ne sais pas si vous voulez ignorer la classe "showEditor" pour la zone 4, mais sinon, voici le résultat: http: / /jsfiddle.net/bYDPr/8/

Fondamentalement, changer

content = $(that).val();

À

content = $('#area' + (index+1)).val();

EDIT: changez "that = this;" à "var that = this;"

$("textarea[class*='showEditor']").each(function(index) {

        buttonId = "editorButton" + index;
        editorButton = '<div class="editorButton"><a id="' + buttonId + '">Editor</a></div>';
        $(editorButton).insertAfter(this);

        var that = this;

        $('#' + buttonId).click(function() {
            content = $(that).val();
            alert(content);
        });     
});

3

MK_Dev 6 oct. 2011 à 19:21

Answer 2

Vous avez manqué la var avant de déclarer les variables!

0

shox 6 oct. 2011 à 19:46

Answer 3

$(function(){
    $('.editorButton').live('click', some_function);
});

function some_function(){
    content = $(this).prev().val();
    alert(content);
}


$('.showEditor').each(function(index){
    buttonId = "editorButton" + index;
    editorButton = '<div class="editorButton"><a id="' + buttonId + '">Editor</a></div>';
    $(this).insertAfter(editorButton);
});

Modifié : en réponse à vos modifications.

1

Ryre 6 oct. 2011 à 19:56

Answer 4

Le problème ici est la portée de l'évaluation de «ceci».

Essayez cette solution: http://jsfiddle.net/richfreedman/bfVnm/1/

$("textarea[class*='showEditor']").each(function(index) {

    buttonId = "editorButton" + index;
    editorButton = '<div class="editorButton"><a id="' + buttonId + '">Editor</a></div>';
    $(editorButton).data("editor", this).insertAfter(this).click(function(event) {
        textarea = $(this).data("editor")
        alert($(textarea).val())
    });
});

1

GreyBeardedGeek 6 oct. 2011 à 19:30

Jquery, ajoutez des boutons sous les éléments et rappelez-vous à quel élément le bouton appartient

4 réponses

Questions connexes

De nouvelles questions

javascript