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
4 réponses
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);
});
});
Vous avez manqué la var avant de déclarer les variables!
$(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.
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())
});
});
Questions connexes
De nouvelles questions
javascript
Pour des questions concernant la programmation dans ECMAScript (JavaScript / JS) et ses divers dialectes / implémentations (hors ActionScript). Veuillez inclure toutes les balises pertinentes dans votre question; par exemple, [node.js], [jquery], [json], etc.