jquery重命名标记中的内容并进行确认

jquery rename content insite a tag and confirming it

本文关键字：确认 重命名 jquery      更新时间：2023-09-26
  • 如何仅针对一个容器
  • 用户应该能够更改名称，然后确认更改

我的功能工作得很好，但当我有更多的容器重复时，我确认它会更改所有标签！

请查看演示，在那里您还可以看到changeElementType函数

演示：http://jsfiddle.net/26qNq/1/

JS:

$('.replace').on('click', function (){
    $("h2").changeElementType("textarea");
    $(this).hide();
    $(this).next('a').show();
    $('.confirm').on('click', function(){
        var $textarea = $('textarea');
        $(this).hide();
        $(this).prev('a').show();
        $textarea.html($textarea.val()).changeElementType("h2");
    });

    if ($('textarea:visible')){
         $(document).keypress(function(e) {
            if(e.which == 13) {
                alert('You pressed enter!');
                $("textarea").changeElementType("h2");
                $('.replace').css('opacity','1');
            }
        });
    }
});

您需要识别相关的h2/textarea

var container = $(this).closest('.rename')
container.find('h2').changeElementType("textarea");

和

var container = $(this).closest('.rename')
var $textarea = container.find('textarea');

您还应该嵌套处理程序绑定，因为每次尝试编辑时，都会添加一个新的处理程序

完全更改

$(document).keypress(function (e) {
    if ($('textarea:visible')) {
        if (e.which == 13) {
            alert('You pressed enter!');
            $("textarea").changeElementType("h2");
            $('.replace').css('opacity', '1');
        }
    }
});
$('.replace').on('click', function () {
    var container = $(this).closest('.rename')
    container.find('h2').changeElementType("textarea");
    $(this).hide();
    $(this).next('a').show();
});
$('.confirm').on('click', function () {
    var container = $(this).closest('.rename')
    var $textarea = container.find('textarea');
    $(this).hide();
    $(this).prev('a').show();
    $textarea.html($textarea.val()).changeElementType("h2");
});

演示位置http://jsfiddle.net/26qNq/6/

为它们添加一个ID似乎很有效。

我所需要做的就是为我们使用的每个元素添加一个数字ID，并将其添加到您的替换代码中：

var id = $(this).attr('id');
$("h2#" + id).changeElementType("textarea");

演示：http://jsfiddle.net/26qNq/12/

相关文章：