#javascript #jquery
#javascript #jquery ( jquery )
Вопрос:
Пожалуйста, ознакомьтесь с моим кодом здесь
Итак, у меня есть несколько элементов 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/>
И я хочу добавить кнопку «Редактор» под каждой текстовой областью, которая имеет класс «showEditor», затем, когда люди нажимают на кнопку редактора, это должно предупреждать о содержимом этой текстовой области.
Вот моя попытка
$("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);
});
});
Но, к сожалению, предупрежденное значение всегда равно 5, что является последним определенным элементом.
Как это можно сделать правильно?
Спасибо
Ответ №1:
Не уверен, что вы хотите пропустить класс «showEditor» для области 4, но если нет, то вот результат: http://jsfiddle.net/bYDPr/8 /
В принципе, измените
content = $(that).val();
Для
content = $('#area' (index 1)).val();
РЕДАКТИРОВАТЬ: Измените «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);
});
});
Комментарии:
1. Спасибо MK_Dev, это близко к тому, что мне нужно, но не совсем, я думаю, что мой пример был недостаточно наглядным, эти идентификаторы текстовой области не обязательно расположены в числовом порядке, а область 4 должна была быть пропущена, потому что я не хочу показывать это для всех текстовых областей, в любом случае я изменил коднемного, чтобы быть ближе к тому, что я хочу jsfiddle.net/bYDPr/20
2. В этом случае все еще проще. Убедитесь, что рядом с «that» есть «var», иначе оно неправильно фиксирует значение «that» и использует последнее присвоенное ему значение: jsfiddle.net/YyuuF/1
Ответ №2:
Проблема здесь заключается в масштабах оценки «этого».
Попробуйте это решение: 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. Привет, Седобородый, это кажется более элегантным решением.
Ответ №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);
});
Отредактировано: в ответ на ваши изменения.
Ответ №4:
Вы пропустили var перед объявлением переменных !