どのようにモーダルにクリックされたボタンに基づいてパラメータを送信するには？

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

     }) 
    }); 

、それは3つのボタンを表示します。 jsfiddeを見てください。

クリックボタン「テストは、パラメータJSON配列1を得る」、私はモーダルパラメータpriceModal1を送りたいと思います。 "Test get parameter json array 2"をクリックすると、パラメータpriceModal2をモーダルに送信します "Test get parameter json array 3"ボタンをクリックすると、パラメータpriceModal3をモーダルに送信します パラメータpriceModal1、priceModal2およびpriceModal3にjson配列が含まれています。 。私は$('#priceModal').on('show.bs.modal', function(e) {.

に

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

を行うしかし、それは働いていません。

私が使用したものの：$(this).attr("data-json");

どれソリューションを私の問題を解決するために？

は、show.bs.modalイベント内のあなたに

Answer 1

thisありがとうjsonデータ属性をボタンに設定されている間、モーダル自体を指します。あなたはe.relatedTargetでイベントをトリガーボタンにアクセスすることができます。

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

さらに、$.dataでdata-属性にアクセスすると、自動的にJSONをパースします。

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

を...とjsonは現在のオブジェクトではなく文字列であるとして、JSON.parseをスキップ：だからあなたの代わりに書くことができます。