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

演示和完整代码是这样的： https ： //jsfiddle.net/oscar11/o5qn5gum/5/

我的HTML代码是这样的：

Click Me 
 
  
 
 
 
 
 
 
 
 Close 
 
  
   

我的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 += '
Test get parameter json array 1

'; isitable += 'Test get parameter json array 2

'; isitable += 'Test get parameter json array 3
'; 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。

当点击按钮“测试获取参数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

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现在是一个对象而不是一个字符串。