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

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));

        })
    });

当点击“Click me”按钮时，会显示三个按钮。看看jsfidde。

当单击按钮“测试获取参数json数组1”时，我想将参数priceModal1发送到模态。 当单击按钮“测试获取参数json数组2”时，我想将参数priceModal2发送到模态 当单击按钮“测试获取参数json数组3”时，我想将参数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

show.bs.modal 事件中的

this 指的是模式本身，而 json 数据属性在按钮处设置。您可以在 e.latedTarget 访问触发事件的按钮。

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

此外，使用 $.data 访问 data- 属性将自动解析 JSON。所以你可以这样写:

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

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