将变量从脚本传递到模态中

Passing variable into a modal from a script

本文关键字：模态 变量 脚本      更新时间：2023-09-26

如果你想用一个变量（例如，@myVar）更新一个模态，该变量在基于用户操作的脚本中更新，你怎么做？因为我不确定脚本内部的某些内容如何在不知道 id 的情况下更新脚本外部的内容，因为脚本内部的变量在其外部并不相同。

我们是否需要模态中的 id 标签来允许从脚本进行某种类型的更新？如果是这样，除了

之外，我们还可以使用哪些选项来允许我们附加一个 id - 如果这是解决问题的方法？

<!DOCTYPE html> <html> <head> ... </head> <body> 

@{var myVar = "______";}
@{var myVar2 = "______";}
...
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModal-label" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModal-label">A list of your choices</h4>
            </div>
            <div class="modal-body">
                <p>My first choice would be @myVar and my second choice would be @myVar2.</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Edit</button>
                <button type="button" class="btn btn-primary">Send</button>
            </div>
        </div>
    </div>
</div>
<script id="myScript" data-myvar="@myVar">
$('[name="optradio1"]').on('change', function () {
    $('#accordion-second').slideToggle();
    $('#accordion-first').slideToggle();
    var value = $(this).val();
    switch (value) {
        case "1":
            $('#myScript').data('myVar', "Option 1");
            alert($('#myScript').data('myVar'));
            break;
        case "2":
            $('#myScript').data('myVar', "Option 2");
            alert($('#myScript').data('myVar'));
            break;
        default:
            alert("neither options were chosen");
    }
});
</script>
<script id="myScript2" data-myvar="@myVar2">
$('[name="optradio2"]').on('change', function () {
    $('#accordion-second').slideToggle();
    $('#accordion-third').slideToggle();
    var value = $(this).val();
    switch (value) {
        case "3":
            $('#myScript2').data('myVar2', "Option 1");
            alert($('#myScript2').data('myVar2'));
            break;
        case "4":
            $('#myScript2').data('myVar2', "Option 2");
            alert($('#myScript2').data('myVar2'));
            break;
        default:
            alert("neither options were chosen");
    }
$('#myModal').modal('toggle');
});
</script>
...

'

</body> </html>

是的，你的想法是正确的。您需要以某种方式解决模态中的元素。您可以使用 ID、类、一些特殊属性等。让我们以 ID 为例。我看到你已经有了模态本身的ID - "我的莫达尔"假设，在某些用户操作中，您希望将变量的值分配给模态上的文本框。你会写这样的东西

<div id="myModal">
...
<input type="text" id="txtUserName"></input>
...
</div>

<script>
  ...
$('#txtUserName',$('#myModal')).val('Jim Smith');
  ...
</script>
相关文章：