Question

我正在尝试获取模式中引入的模式调用者和用户输入值。

我知道我可以通过以下方式访问调用程序：

$('#myModal').on('show.bs.modal', function (e) {
    var invoker = $(e.relatedTarget);
});

通过执行以下操作，我还可以在模态中引入用户输入值：

$('#myModal').on('hidden.bs.modal', function (e) {
    var color = $("#myModal #input-id").val();
});

但是我该如何融合两者以获得该值并基于它更改调用者属性。

我的调用者：

<div style="background: white;" data-toggle="modal" data-target="#myModal">
    <span>Some text<span/>
</div>
<div style="background: white;" data-toggle="modal" data-target="#myModal">
    <span>Some text<span/>
</div>
<div style="background: white;" data-toggle="modal" data-target="#myModal">
    <span>Some text<span/>
</div>

当用户单击我的div时，模式将以一些输入文本触发，在用户输入值并按保存按钮（data-dismiss =“ modal”）之后，我想用js捕获输入值和调用程序以及切换样式具有输入值用户的调用方属性。

模式：

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="MyNewModal" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Title</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Exit">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <label for="input-id" class="col-form-label">Color:</label>
                    <input type="text" class="form-control" id="input-id">
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-dismiss="modal">Save</button>
            </div>
        </div>
    </div>
</div>

如何使用模态中引入的用户数据来更改调用者的style属性？

Answer 1

您只需使用jQuery的@echo off if "%PATH_BASE%" == "" set PATH_BASE=%PATH% set PATH=%CD%;%PATH_BASE%; chcp 65001 2>nul >nul java -jar -Duser.language=en -Dfile.encoding=UTF8 "%~dp0\apktool.jar" %*方法即可更改元素的样式，

css

只需使用要更改的样式属性修改var invoker = $(e.relatedTarget); invoker.css(<property>, <value>);，然后再修改您要设置的<property>。

如果要从元素访问样式，则再次使用<value>，这次仅使用css。

Answer 2

如@dwhite在他的评论中所建议，如果我们要在退出模式后访问调用程序，则需要将调用程序保存在show.bs.modal事件的变量中。这段代码可以完成这项工作：

// Declare global variable
var invoker;

// On modal show event we save invoker
$('#myModal').on('show.bs.modal', function (e) {
    invoker = $(e.relatedTarget);
    console.log(invoker);
});

// When the user provides input and he exit modal, we get that value and we can
// access invoker to perform some actions
$('#myModal').on('hidden.bs.modal', function () {
    var color = $("#myModal #input-id").val();
    $(invoker).css('background', color);
    console.log(invoker);
    console.log(imageUrl);
});

Bootstrap的模式-使用模式输入值来更改调用者属性

2 个答案: