Jquery, добавьте кнопки под элементами и запомните, к какому элементу принадлежит кнопка

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

Ответ №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 перед объявлением переменных !