通過，點擊基於模態

Question

這裏面的ID的DIV的模式和顯示數據的ID是我的MySQL的代碼，其中一個div自動生成我想將該div中顯示的數據的id傳遞給模態，並基於該數據將其顯示在模態中。我的模態代碼是：

<div id="myModal" class="modal fade" role="dialog"> 
    <div class="modal-dialog" align="center"> 

    <!-- Modal content--> 
    <div class="modal-content" align="center"> 
     <div class="modal-header" align="center"> 
     <button type="button" class="close" data-dismiss="modal">&times;</button> 
     <!-- <h2 class="modal-title">You're buying Tickets for</h2><br> --> 
     <h1 class="modal-title"><br>3D Printing Workshop</h1><br> 
     <h4 class="modal-title">July 14, Mumbai</h4> 
     <h5 class="modal-title">9.30 AM - 4.30 PM</h5><br> 
     <h5 class="modal-title">iKeva, Lower Ground 2, Art Guild House, Phoenix Market City, Mumbai 123456</h5> 
     </div> 
     <div class="modal-body" align="center"> 

       <div class="container"> 
    <div class="tabs"> 
     <div class="col-sm-1"></div> 
     <div class="col-sm-8 col-xs-12"> 
      <div class="title"> 
       <h2>1. Choose Attendee Type</h2><br> 
       <h5><em>Tickets are strictly available on a First Come First Serve Basis only. <br> Students have to provide valid Student ID cards during Check-in</em></h5><br> 
      </div> 
      <br> 
      <ul class="nav nav-tabs nav-justified"> 
       <li class="active" ><a data-toggle="tab" href="#professionals">Professionals</a></li> 
       <li><a data-toggle="tab" href="#students">Students</a></li> 
      </ul> 
      <br> 
      <form> 
       <div class="tab-content"> 
        <div id="professionals" class="tab-pane fade in active"> 
        <table class="table"> 
         <tbody> 
          <tr> 
           <td>Early Bird Ticket</td> 
           <td>Ends on Mar 17</td> 
           <td>5 Left</td> 
           <td><select class="form-control" id="tickets"> 
             <option value="1">1</option> 
             <option value="2">2</option> 
             <option value="3">3</option> 
             <option value="4">4</option> 
             <option value="5">5</option> 
            </select> 
           </td> 
           <td>x</td> 
           <td>Rs. 1499/-</td> 
          </tr> 
          <tr> 
           <td>Regular Ticket</td> 
           <td>Ends on Mar 20</td> 
           <td></td> 
           <td><select class="form-control" id="tickets1" disabled> 
             <option value="1">1</option> 
             <option value="2">2</option> 
             <option value="3">3</option> 
             <option value="4">4</option> 
             <option value="5">5</option> 
            </select> 
           </td> 
           <td>x</td> 
           <td>Rs. 1999/-</td> 
          </tr> 
          <tr> 
           <td>Last Minute Ticket</td> 
           <td>Ends on Mar 24</td> 
           <td></td> 
           <td><select class="form-control" id="tickets2" disabled> 
             <option value="1">1</option> 
             <option value="2">2</option> 
             <option value="3">3</option> 
             <option value="4">4</option> 
             <option value="5">5</option> 
            </select> 
           </td> 
           <td>x</td> 
           <td>Rs. 2999/-</td> 
          </tr> 
          <tr> 
           <td></td> 
           <td></td> 
           <td colspan="4"><hr style="width: 100%; margin-top: 0; margin-bottom: 0"></td> 
          </tr> 
          <tr> 
           <td><input type="text" style="font-size: 12px;" placeholder="Discount Coupon"><button class="btn btn-link">Apply</button></td> 
           <td></td> 
           <td colspan="3"><em>(incl of all taxes)</em></td> 
           <td>Rs. 1998/-</td> 
          </tr> 
         </tbody> 
        </table> 
        </div> 
        <div id="students" class="tab-pane fade"> 
        <table class="table"> 
         <tbody> 
          <tr> 
           <td>Early Bird Ticket</td> 
           <td>Ends on Mar 17</td> 
           <td>5 Left</td> 
           <td><select class="form-control" id="tickets3"> 
             <option value="1">1</option> 
             <option value="2">2</option> 
             <option value="3">3</option> 
             <option value="4">4</option> 
             <option value="5">5</option> 
            </select> 
           </td> 
           <td>x</td> 
           <td>Rs. 1499/-</td> 
          </tr> 
          <tr> 
           <td>Regular Ticket</td> 
           <td>Ends on Mar 20</td> 
           <td></td> 
           <td><select class="form-control" id="tickets4" disabled> 
             <option value="1">1</option> 
             <option value="2">2</option> 
             <option value="3">3</option> 
             <option value="4">4</option> 
             <option value="5">5</option> 
            </select> 
           </td> 
           <td>x</td> 
           <td>Rs. 1999/-</td> 
          </tr> 
          <tr> 
           <td>Last Minute Ticket</td> 
           <td>Ends on Mar 24</td> 
           <td></td> 
           <td><select class="form-control" id="tickets5" disabled> 
             <option value="1">1</option> 
             <option value="2">2</option> 
             <option value="3">3</option> 
             <option value="4">4</option> 
             <option value="5">5</option> 
            </select> 
           </td> 
           <td>x</td> 
           <td>Rs. 2999/-</td> 
          </tr> 
          <tr> 
           <td></td> 
           <td></td> 
           <td colspan="4"><hr style="width: 100%; margin-top: 0; margin-bottom: 0"></td> 
          </tr> 
          <tr> 
           <td><input type="text" style="font-size: 12px; text-align: center;" placeholder="Discount Coupon"><button class="btn btn-link">Apply</button></td> 
           <td></td> 
           <td colspan="3"><em>(incl of all taxes)</em></td> 
           <td>Rs. 1998/-</td> 
          </tr> 

         </tbody> 
        </table> 
        </div> 
       </div> 
       <br> 

        <div class="title"> 
         <h2>2. Attendee Details</h2><br> 
         <h5><em>Please enter details of individual Attendee(s). <br> In case of multiple attendees, Billing details should be same as the first Attendee.</em></h5><br> 
        </div> 
        <br> 
        <table class="table" id="attendees"> 

         <tbody> 
          <tr> 
          <td><input type="text" class="form-control" name="" placeholder="Name"></td> 
          <td><input type="text" class="form-control" name="" placeholder="Email"></td> 
          <td><input type="text" class="form-control" name="" placeholder="Mobile No."></td> 
          </tr> 
         </tbody> 

        </table> 

      </form> 
     </div> 
    </div> 

</div> 



     </div> 
    </div> 
</div> 
</div> 

Answer 1

不需要你所有的代碼，你可以很容易地做到這一點。

<div> 
    <div id="hello" style="background-color:red; color :white;text-align:center; padding: 10px;"> 
    <span id="this">blah blah</span> 
    <span id="something">More info</span> 
    </div> 
</div> 
    <hr> 
    <div id="modal"> 
    <div id="here1">Nothing</div> 
    <div id="here2">Nohing2</div> 
    </div> 

，並使用此jQuery的搶值並填充模式：

$('div#hello').click(function(){ 
    var first= $('#this').html(); 
    var second= $('#something').html(); 
    $('#here1').html(first); 
    $('#here2').html(second); 
}); 

見我在這裏的行動：http://jsbin.com/rulaqabane/edit?html,js,output

正在獲取數據後，這是一個單獨的問題！

更新：

$('div#hello').click(function(){ 
     var id= $('#id').html(); 
     $.get('/my/api/resource', {id: id}, function(data){ 
      $('#target').html(data.whatever); 
     }); 
    });