Question

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

到目前为止我能够更新html，但两个colums都会更新。是否只有更新点击的元素？ element保存data-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>

到目前为止，我有这个HTML：

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

到目前为止，这是jQuery：

<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>

Answer 1

在看完整个HTML后编辑： 看到更新的html后，只需将var element = $(this);替换为var element = $(e.currentTarget);。

e.currentTarget指的是事件附加到的元素，因此将始终是edit类的元素，与e.target不同，edit是您点击的实际元素（这可以是tibble类的元素的子元素。

希望这有帮助

Answer 2

更新并将脚本移动到代码段中。

＆＃13;

var element = null;
$('.edit').click(function(e){
        element = $(this);
        var page = 'home';

        $('#editBox').modal('show');
        $('textarea.htmldata').val(element.text());

        $('.save').click(function(e){
            e.preventDefault();
            element.html($('.htmldata').val());
            $('#editBox').modal('hide');
        });

    });

＆＃13;

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<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>

＆＃13;

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

2 个答案: