如何基于模态中单击哪个按钮来发送参数? [英] How to send parameter based on which button is clicked in modal?

问题描述

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

Demo and full code is like this : https://jsfiddle.net/oscar11/o5qn5gum/5/

我的HTML代码如下:

My HTML code is like this :

<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代码是这样的:

My Javascript code is like this :

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

        })
    });

当单击单击我"按钮时，将显示三个按钮.看看jsfidde.

When click button "Click me", It will display three button. Look jsfidde.

当单击按钮测试获取参数json数组1"时，我想将参数priceModal1发送到模态. 当单击按钮测试获取参数json数组2"时，我想将参数priceModal2发送到模态 当单击按钮测试获取参数json数组3"时，我想将参数priceModal3发送到模态 参数priceModal1，priceModal2和priceModal3包含json数组.我

When click button "Test get parameter json array 1", I want send parameter priceModal1 to modal. When click button "Test get parameter json array 2", I want send parameter priceModal2 to modal When click button "Test get parameter json array 3", I want send parameter priceModal3 to modal Parameter priceModal1, priceModal2 and priceModal3 contain json array. I do

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

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

但是它不起作用.

尽管我使用的是:$(this).attr("data-json");

有什么解决方案可以解决我的问题?

Any solution to solve my problem?

谢谢

推荐答案

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

this inside the show.bs.modal event, refers to the modal itself, while the json data attribute is set at the button. You can access the button that triggered the event at e.relatedTarget.

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

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

Furthermore, accessing a data- attribute with $.data will automatically parse JSON. So you could instead write:

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

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

... and skip JSON.parse, as json is now an object and not a string.

这篇关于如何基于模态中单击哪个按钮来发送参数?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！