Veuillez consulter mon code ici

http://jsfiddle.net/bYDPr/20/

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

0
Yasser1984 6 oct. 2011 à 22:57

4 réponses

Meilleure réponse

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

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

0
shox 6 oct. 2011 à 19:46
$(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

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