javascript - 使用 Twitter Bootstrap 模式按钮时获取 e.relatedTarget

Question

我编写了代码以在单击按钮时显示模态框，目的是在模态框内编辑按钮的文本。

我的意图是有很多按钮，所以我不是通过 id 获取它们，而是在调用模式时使用 e.relatedTarget 以便知道调用了哪个按钮并从按钮中获取文本以便我可以显示它在模态。

但是当我在模态窗口中编辑文本并单击“确定”按钮时，问题就来了。我不知道如何从那里访问 e.relatedTarget。

HTML:

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">Change this text</button>
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <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="exampleModalLabel">New message</h4>

            </div>
            <div class="modal-body">
                <form>
                    <div class="form-group">
                        <label for="text-to-edit" class="control-label">Edit text:</label>
                        <input type="text" class="form-control" id="text-to-edit">
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Send message</button>
            </div>
        </div>
    </div>
</div>

JS:

$('#exampleModal').on('show.bs.modal', function (event) {
    var button = $(event.relatedTarget) // Button that triggered the modal
    var buttonText = button.text() // Get text
    // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
    var modal = $(this)
    modal.find('.modal-body input').val(buttonText)
});

// Modal ok button
$('#exampleModal .btn-primary').click(function() {
    // Get input text value
    var text = $('#exampleModal').find('.modal-body input').text();

    // Hide modal
    $('#exampleModal').modal('hide');

    // Set new text to the caller button
    // ?
});

JsFiddle:http://jsfiddle.net/nm4nmxsf/

有什么帮助吗？

Answer 1

我添加了评论告诉你要改变什么

// Set an empty variable for button outside of your function !important
var button = '';

$('#exampleModal').on('show.bs.modal', function (event) {

    //don't redeclare your variable for button, instead update it
    button = $(event.relatedTarget) // Button that triggered the modal

    var buttonText = button.text() // Get text
    // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
    var modal = $(this);
    modal.find('.modal-body input').val(buttonText);
});

// Modal ok button
$('#exampleModal .btn-primary').click(function() {
    // Get input text value

    //use val() instead of text()
    var text = $('#exampleModal').find('.modal-body input').val();

    $('#exampleModal').modal('hide');

    // Set new text to the caller button
    // ?
    button.text(text);
});

看这个fidde: http://jsfiddle.net/nm4nmxsf/4/