Question

拉特利，我一直在学习一些jQuery。

我想要完成的是，当你点击一个名为Edit的按钮时，除了这个按钮之外的音符会从div转换为textarea。

在此区域下方，会显示“更新”按钮。但问题是所有的Update按钮都显示出来了。我只想显示特定文本区域的编辑按钮。

HTML

$i = 0;
foreach($byanat_notering as $key => $value){
    echo "<tr><td width='160' valign='top'><font size='2'>";
    echo substr($value["created"],0,16);
    echo "<br />".$user[$value["users_id"]]["namn"];
    echo "<br/><button type='button' class='edit-note' data-note-id='note-$i'>Redigera</button>";
    echo "</td><td width='550' valign='top'><font size='2'>";
    echo "<div class='note' id='note-$i' note_id='{$value['byanat_notering_id']}'>" . $value["text"] . "</div>";
    echo "<button type='button' class='save-note' save-note-id='note-$i'>Spara</button>";
    echo "</td></tr>";
    $i++;
}

的jQuery

$(function () {

    var editButton = $('button.edit-note');
    var saveButton = $('button.save-note');

    var noteContent = ""; //The note content goes here
    var id_for_note = "";
    editButton.bind('click', function () {
        var note = $('div#' + $(this).data('note-id'));
        id_for_note = note.attr('note_id');
        note_id = note.replaceWith($('<textarea>', {
            id:   note.attr('id'),
            "class": note.attr('class'),
            note_id: note.attr('note_id'),
            text: note.text()
        }));
        saveButton.show();
        editButton.hide();
    });

        saveButton.bind('click', function () {
            var note = $('textarea#' + $(this).data('note-id'));
            noteContent = note.val();
            note.replaceWith($('<div />', {
                id: note.attr('id'),
                text: note.text()
            }));
            $.ajax({
                type: "POST",
                url: "edit_byanat_note.php",
                data: { notecontent: noteContent, id_for_note: id_for_note },
                success: function(){ $('#success_box').fadeIn(550).css('color', '#000000').html('<strong>Redigering klar</strong>').delay(500).fadeOut(550)},
                error: function(){
                    alert('Det gick inte att uppdatera inlägget.');
                },
                complete:function(){
                    setTimeout(function() {
                    window.location.reload();
            }, 1000);

        } 
            });
            editButton.show();
            saveButton.hide();
    });


});

如您所见，saveButton显示的是所有音符，而不仅仅是您选择的音符。

Answer 1

查看HTML输出的标记，有两种方法可以引用该按钮，下面显示为var noteSaveButton

使用Javascript：

editButton.bind('click', function () {
        var note = $('div#' + $(this).data('note-id'));
        var noteSaveButton = note.parents('tr').first().find('button.save-note');
        /* Could also be 
        var noteSaveButton = $('button[data-note-id="' + $(this).data('note-id') + '"]');
        */
        id_for_note = note.attr('note_id');
        note_id = note.replaceWith($('<textarea>', {
            id:   note.attr('id'),
            "class": note.attr('class'),
            note_id: note.attr('note_id'),
            text: note.text()
        }));
        noteSaveButton.show();
        editButton.hide();
    });

单击特定文本区域下方的显示按钮

1 个答案: