【问题标题】:How to get value of data-id and place it into a twitter bootstrap modal?如何获取 data-id 的值并将其放入 twitter 引导模式?
【发布时间】:2014-11-09 18:30:13
【问题描述】:

我试图在我的数据库中获取包含和 id 的 data-id 的值。我需要获取 admin_id 并将其放入 twitter 引导模式。我将如何使用 java 脚本获取该值?

<a data-toggle="modal" data-id="<?=$row['ADMIN_ID'];?>" href="#view_contact" class="btn btn-info btn-xs view-admin">View</a>

这是我的模态

            <div class="modal fade" id="view_contact" role="dialog">
                <div class="modal-dialog">
                    <div class="modal-content">

                        <div class="modal-header">
                            <h4>Admin modal!!</h4>

                        </div>

                        <div class="modal-body">
                            Admin Id:<p id="showid"></p>
                        </div>

                        <div class="modal-footer">

                            <a class="btn btn-default" data-dismiss="modal">Close</a>

                        </div>


                    </div>

                </div>

            </div>

这是我的 java 脚本

            <script type="text/javascript">


            $(document).on("click", ".view-admin", function () {
                 var adminid = $(this).data('id');
                 $(".modal-body #showid").val( adminid );
                 $('#view_contact').modal('show');
            });

            </script>

它没有显示在我的模态中。它们都在同一个页面中。我该怎么做呢?在这方面有点新意。

【问题讨论】:

    标签: javascript php jquery twitter-bootstrap


    【解决方案1】:

    问题是,您正在尝试将值分配给 p 标记。 p 标签没有 value 属性。使用text()html()

    $(document).on("click", ".view-admin", function() {
        var adminid = $(this).data('id');
        $(".modal-body #showid").text(adminid);
        $('#view_contact').modal('show');
    });
    

    【讨论】:

    • 这行得通,非常感谢!但是,如果我想在模态中回显变量,例如: 并且没有将值分配给

      标记?

    • 我明白了。感谢您的帮助!
    【解决方案2】:

    你可以替换

    $(".modal-body #showid").val( adminid );
    

    $("#showid").text( adminid );
    

    您不需要为 id #showid 引用类名 .modal-body,因为根据W3C Validation,页面中必须只有一个 id 名称。使用 id 引用是访问任何 html 元素的最快方法。

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2016-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2016-10-27
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多