加載基於哪個div被點擊的jQuery模式

Question

所以我想要做的是加載一個付款模式（它將有一個付款/信用卡的形式），並動態加載「選定的計劃」模態。

下面是「選擇一個計劃」HTML - 我想要做的/需要幫助的是一個jQuery函數，打開模式並加載「您選擇了這個計劃」。

PS。這裏是一個小提琴，如果它更容易http://jsfiddle.net/9xyJn/

這是我對JS方至今：

$(".planSelector").click(function() { 
      console.log("got that clcik."); 
      var selectedPlan = //Get the selected plan 
      $("#paymentModal").modal("show"); 
     }); 

HTML：

<div class="container"> 
    <div class="row"> 
     <hr> 
     <div class="span12 pick-plan-intro"> 
      <h2>Great sales teams come in all sizes</h2> 
      <h6>All plans are including all features</h6> 
     </div> 
     <div id="Free" class="span3"> 
      <div class="sparta-plan"> 
       <h4 id="freePlan">Free</h4> 
       <p>Free</p> 
       <p>Up to 5 users</p> 
       <a class="btn btn-large btn-info btn-block planSelector" href="#">Select plan</a> 
      </div> 
     </div> 
     <div id="Small" class="span3"> 
      <div class="sparta-plan"> 
       <h4 id="smallPlan">Small</h4> 
       <p>$99</p> 
       <p>Up to 15 users</p> 
       <a class="btn btn-large btn-info btn-block planSelector" href="#">Select plan</a> 
      </div> 
     </div> 
     <div id="Medium" class="span3"> 
      <div class="sparta-plan"> 
       <h4 id="mediumPlan">Medium</h4> 
       <p>$199</p> 
       <p>Up to 30 users</p> 
       <a class="btn btn-large btn-info btn-block planSelector" href="#">Select plan</a> 
      </div> 
     </div> 
     <div id="Mega" class="span3"> 
      <div class="sparta-plan"> 
       <h4>Custom</h4> 
       <p>...</p> 
       <p>Please contact us</p> 
       <a class="btn btn-large btn-info btn-block" href="#">Contact us</a> 
      </div> 
     </div> 
    </div> 
</div> 

Answer 1

我已經修改了你的代碼一點點，並添加id到你的<a>屬性。

這裏的的jsfiddle更新：http://jsfiddle.net/saurabhsharma/9xyJn/1/