将变量从脚本传递到模态

时间:2014-12-29 21:05:07

标签: javascript jquery asp.net twitter-bootstrap global-variables

如果您想更新一个带有变量(例如@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>

1 个答案:

答案 0 :(得分:1)

是的,你在思考正确的方向。您需要以某种方式处理模态中的元素。您可以使用ID,类,一些特殊属性等。 我们以ID为例。我看到你已经拥有模态本身的ID - &#34; myModal&#34; 让我们说,在某些用户操作上,您希望将变量的值分配给模式上的文本框。你会写这样的东西

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


<script>
  ...
$('#txtUserName',$('#myModal')).val('Jim Smith');
  ...
</script>