模态打开时如何发送参数json数组？

Question

演示和完整代码如下：https://jsfiddle.net/xzxrp7nn/5/

我的 HTML 代码是这样的：

<div id="tes">

</div>


<!-- Modal Currency-->
<div class="modal fade" id="priceModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">


            </div>
            <div class="modal-body">

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>

我的 Javascript 代码是这样的：

$(document).ready(function(){

        var priceModal = '{"attributes":{"Code":"DBL","Total":"200000"},"DayPrice":{"Date":"2016-05-26","Rate":"200000"}}';

        var isitable = '<button class="btn blue tes_button" data-toggle="modal" data-target="#priceModal" id="priceModal='+priceModal+'">tes</button>';

        $("#tes").html(isitable);
        $('#priceModal').on('show.bs.modal', function(e) {
            var param = e.relatedTarget.id;
            console.log(param);
        })
    })

当打开模态时，我想要获取参数 priceModal。我在$('#priceModal').on('show.bs.modal', function(e) { 中做console.log(param);。

但是结果：priceModal={

有什么办法可以解决我的问题吗？

谢谢

Answer 1

JSFiddle

您使用的引号不正确：

 $(document).ready(function(){

        var priceModal = "{'attributes':{'Code':'DBL','Total':'200000'},'DayPrice':{'Date':'2016-05-26','Rate':'200000'}}";

        var isitable = '<button class="btn blue tes_button" data-toggle="modal" data-target="#priceModal" id="priceModal'+priceModal+'">tes</button>';

        $("#tes").html(isitable);
        $('#priceModal').on('show.bs.modal', function(e) {
            var param = e.relatedTarget.id;
            console.log(param);
        });
    });

Answer 2

不建议这样做，但如果您想实现它，那么您可以在为button 分配id 期间删除"。 DOM 仍将"" 插入属性值，但这将有助于获取值。同样，为id 存储这样的值并不是一个好习惯。您可以将其存储在同一 element 的任何 data-* 属性中。

以下示例显示了在分配 id 时删除 "" 会发生什么

$(document).ready(function() {

  var priceModal = '{"attributes":{"Code":"DBL","Total":"200000"},"DayPrice":{"Date":"2016-05-26","Rate":"200000"}}';

  var isitable = '<button class="btn blue tes_button" data-toggle="modal" data-target="#priceModal"'
    +' id=priceModal=' + priceModal + '>tes</button>';
       //^Remove "" from here
  $("#tes").html(isitable);
  $('#priceModal').on('show.bs.modal', function(e) {
    var param = e.relatedTarget.id;
    $('.modal-body').html(param);
  })
})

.clsDatePicker {
  z-index: 100000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

<div id="tes">

</div>


<!-- Modal Currency-->
<div class="modal fade" id="priceModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">


      </div>
      <div class="modal-body">

      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
    <!-- /.modal-content -->
  </div>
  <!-- /.modal-dialog -->
</div>