Question

请在此处查看我的代码

所以我有一些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下添加一个“Editor”按钮，然后当人们点击Editor按钮时，它应该提醒该textarea的内容。

这是我的尝试

$("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，这是最后定义的元素。

如何正确完成？

由于

Answer 1

不确定是否要跳过区域4的“showEditor”类，但如果没有，则结果如下：http://jsfiddle.net/bYDPr/8/

基本上，改变

content = $(that).val();

到

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

编辑：改变“那=这个;”到“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);
        });     
});

Answer 2

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

已修改：以回应您的更改。

Answer 3

这里的问题是“这个”的评估范围。

尝试此解决方案：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())
    });
});

Answer 4

在宣布变量之前你错过了var！

Jquery，在元素下添加按钮，并记住按钮所属的元素

4 个答案: