Jquery 如何使用数据id属性查找和替换html数据？

我想做一个实时更新功能，当用户点击所选元素时，他会得到一个模式弹出窗口，并且可以对所选文本进行更改

到目前为止，我可以更新html，但两个列都会更新。是否有办法只更新单击的元素？元素保存数据id，但如何更新正确的id

模态：

<div class="modal fade" id="editBox" tabindex="-1" role="dialog" aria-labelledby="editBox">
    <div class="modal-dialog" role="document">
        <form action="#" method="post">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="editBox">Edit</h4>
                </div>
                <div class="modal-body">
                    <textarea class="form-control htmldata"></textarea>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary save">Save</button>
                </div>
            </div>
        </form>
    </div>
</div>

<h1 class="edit" data-id="1">Test</h1>
<div class="edit" data-id="2">
   my content here
</div>  

<script>
    $('.edit').click(function(e){

        var element = $(this);
        var page = 'home';

        $('#editBox').modal('show');

        var data = (
            {
                'id':element.data("id"),
                'page': page
            }
        );

        $('.save').click(function(e){
            e.preventDefault();
            element.html($('.htmldata').val());
            $('#editBox').modal('hide');
        });

    });
</script>

&时代；
编辑
取消
拯救

到目前为止，我有以下html:

<div class="modal fade" id="editBox" tabindex="-1" role="dialog" aria-labelledby="editBox">
    <div class="modal-dialog" role="document">
        <form action="#" method="post">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="editBox">Edit</h4>
                </div>
                <div class="modal-body">
                    <textarea class="form-control htmldata"></textarea>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary save">Save</button>
                </div>
            </div>
        </form>
    </div>
</div>

<h1 class="edit" data-id="1">Test</h1>
<div class="edit" data-id="2">
   my content here
</div>  

<script>
    $('.edit').click(function(e){

        var element = $(this);
        var page = 'home';

        $('#editBox').modal('show');

        var data = (
            {
                'id':element.data("id"),
                'page': page
            }
        );

        $('.save').click(function(e){
            e.preventDefault();
            element.html($('.htmldata').val());
            $('#editBox').modal('hide');
        });

    });
</script>

测试
我的内容在这里

到目前为止，这是jQuery:

<div class="modal fade" id="editBox" tabindex="-1" role="dialog" aria-labelledby="editBox">
    <div class="modal-dialog" role="document">
        <form action="#" method="post">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="editBox">Edit</h4>
                </div>
                <div class="modal-body">
                    <textarea class="form-control htmldata"></textarea>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary save">Save</button>
                </div>
            </div>
        </form>
    </div>
</div>

<h1 class="edit" data-id="1">Test</h1>
<div class="edit" data-id="2">
   my content here
</div>  

<script>
    $('.edit').click(function(e){

        var element = $(this);
        var page = 'home';

        $('#editBox').modal('show');

        var data = (
            {
                'id':element.data("id"),
                'page': page
            }
        );

        $('.save').click(function(e){
            e.preventDefault();
            element.html($('.htmldata').val());
            $('#editBox').modal('hide');
        });

    });
</script>

$（'.edit'）。单击（函数（e）{
var元素=$（此）；
变量页='主页'；
$（'editBox'）.modal（'show'）；
风险值数据=(
{
“id”：元素.data（“id”），
“页面”：页面
}
);
$（'.save'）。单击（函数（e）{
e、 预防默认值（）；
html（$（'.htmldata'）.val（））；
$（'#editBox'）.modal（'hide'）；
});
});

查看整个html后编辑： 看到更新后的html后，只需替换

var元素=$（这是）带有
var元素=$（e.currentTarget）

指事件附加到的元素，因此始终是具有
edit
类的元素，而不是
e.target
，它是您单击的实际元素（这可能是具有
edit
类的元素的子元素）

希望这有助于更新脚本并将其移动到代码段中。


var元素=null；
$（'.edit'）。单击（函数（e）{
元素=$（该元素）；
变量页='主页'；
$（'editBox'）.modal（'show'）；
$（'textarea.htmldata'）.val（element.text（））；
$（'.save'）。单击（函数（e）{
e、 预防默认值（）；
html（$（'.htmldata'）.val（））；
$（'#editBox'）.modal（'hide'）；
});
})；

&时代；
编辑
取消
拯救
试验
我的内容在这里
你能给我们提供一个实例吗？大部分都是关于E的，只是不包括模态本身。当你单击“保存”时，我需要更新已单击元素$（'.htmldata'）的数据在HTML中使用该类的位置？添加了所有代码当我单击某个元素时，该元素有一个id，我需要替换该特定id的特定HTML代码/内容。如果它只对第一个元素起作用，那么在编辑元素二后，它也会更新第一个元素。是否尝试过？
$（'.edit[data id=“”+element.data（'id'）+“]）
的意思是“搜索对象，它具有
.edit
类，并且具有属性
数据id
，其中值取决于
元素。数据（'id'））
。是的，当我重新打开模式并输入值时，它会同时替换id 1和id 2，模式是否默认保留旧id？编辑第一个，然后编辑第二个，然后用最后一个更新这两个。@sdfgg45:查看我编辑的答案-
e.currentTarget
应该可以做到这一点