Question

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

我的HTML代码是这样的：

<button type="button">Click Me</button>

<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(){
        $("button").click(function(){

            $.ajax({
                //type: 'POST',
                //url: 'script.php',
                success: function(data) {
                    // alert(data);
                    // $("p").text(data);
                    var priceModal1 = '[{"@attributes":{"Code":"SGL","Total":"200000"},"DayPrice":{"Date":"2016-05-26","Rate":"200000"}},{"@attributes":{"Code":"DBL","Total":"200000"},"DayPrice":{"Date":"2016-05-26","Rate":"200000"}}]';
                    var priceModal2 = '[{"@attributes":{"Code":"SGL","Total":"225000"},"DayPrice":{"Date":"2016-05-26","Rate":"225000"}},{"@attributes":{"Code":"DBL","Total":"225000"},"DayPrice":{"Date":"2016-05-26","Rate":"225000"}}]';
                    var priceModal3 = '[{"@attributes":{"Code":"SGL","Total":"410000"},"DayPrice":{"Date":"2016-05-26","Rate":"410000"}},{"@attributes":{"Code":"DBL","Total":"410000"},"DayPrice":{"Date":"2016-05-26","Rate":"410000"}}]';

                    var isitable = '';
                    isitable += '<br><button class="btn blue tes_button" data-toggle="modal" data-target="#priceModal" id="priceModel1" data-json='+priceModal1+'>Test get parameter json array 1</button><br><br>';
                    isitable += '<button class="btn blue tes_button" data-toggle="modal" data-target="#priceModal" id="priceModel2" data-json='+priceModal2+'>Test get parameter json array 2</button><br><br>';
                    isitable += '<button class="btn blue tes_button" data-toggle="modal" data-target="#priceModal" id="priceModel3" data-json='+priceModal3+'>Test get parameter json array 3</button><br>';

                    console.log(isitable);
                    $("#tes").html(isitable);

                }
            });
        });

        $('#priceModal').on('show.bs.modal', function(e) {
             //console.log('yes');

            var json = $(this).attr("data-json");
            $(".modal-body").html(json);
            console.log("JSON »» From priceModel Element "+json);
            console.log(JSON.parse(json));

        })
    });

单击按钮＆＃34;单击我＆＃34;，将显示三个按钮。看看jsfidde。

当点击按钮＆＃34;测试获取参数json数组1＆＃34;时，我想将参数priceModal1发送到模态。当点击按钮＆＃34;测试获取参数json数组2＆＃34;时，我想将参数priceModal2发送到模态当点击按钮＆＃34;测试获取参数json数组3＆＃34;时，我想将参数priceModal3发送到模态参数priceModal1，priceModal2和priceModal3包含json数组。我做了

console.log("JSON »» From priceModel Element "+json);
            console.log(JSON.parse(json));

$('#priceModal').on('show.bs.modal', function(e) {.

中的

但它没有用。

虽然我使用：$(this).attr("data-json");

解决我问题的任何解决方案？

谢谢

Answer 1

this事件中的

show.bs.modal指的是模态本身，而json数据属性则设置在按钮上。您可以访问触发e.relatedTarget上的活动的按钮。

var json = $(e.relatedTarget).attr('data-json');

此外，使用data-访问$.data属性会自动解析JSON。所以你可以写一下：

var json = $(e.relatedTarget).data('json');

...并跳过JSON.parse，因为json现在是一个对象，而不是一个字符串。

如何根据模态中单击的按钮发送参数？

1 个答案: