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/

Answer 2

var button;

$('#exampleModal').on('show.bs.modal', function (event) {
    button = $(event.relatedTarget);
    var buttonText = button.text();
    var modal = $(this);
    modal.find('.modal-body input').val(buttonText);
});

$('#exampleModal .btn-primary').click(function() {
    var text = $('#exampleModal').find('.modal-body input').val();
    $('#exampleModal').modal('hide');
   button.text(text);
});

JSFIDDLE

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

2 个答案: