如何在按下按钮时获取计划详细信息

时间：2017-12-08 09:49:23

标签： javascript jquery

这里我有一个表格和三个按钮，假设我点击立即注册按钮意味着我已经采取了计划细节，如

  1. 联系人详细信息最多？
  2. 奖金联系方式最多？
  3. 区域主人协助：否？
  4. 通过短信联系方式？

    5. 以上价值我想采取怎样的措施？我试过我可以采取我选择的计划名称，但我无法采取计划细节

    ＆＃13;
    ＆＃13; 
      $(".payNow").on("click", function(e) {
    var $list = $(this).closest(".pricing-table");
      name = $list.find(".myTitle").text();

    console.log(name);
  });
    ＆＃13; 
    <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<body>
<body>
		<div class="container-fluid plan-background" style="margin-top: 0%;padding-right: 0px;padding-left: 0px;">
		<div class="container main_btm" style="padding-left: 0px;padding-right: 0px; ">

		<div class="row top" style="margin-left: 0px;margin-right: 0px;margin-top:22px;">
         
		<div class="col-md-5 col-sm-6 hidden-xs" class-align="right" style="margin-top: 10px;padding:left:23px; ">

		</div>
		<div class="col-md-3 col-sm-6 col-xs-12 mobile-property-list" style="margin-top: 10px; padding-left: 27px;"><h4 style="color:#fff;font-size:20px;"> Select Your Plan</h4></br>  </div>
		<div class="col-md-4 col-sm-0 hidden-xs"></div>

		</div>

		<div class="row mobile-filter"  style="margin-top: 5px; margin-left: 0px;margin-right: 0px;margin-bottom:5%;" >

		<div class="col-md-1"></div>
		<div class="col-md-10 top-a rentListing" style="padding-left:0px;">

		<section id="pricing-table">
                <div class="row pricelistNew">
                    <div class="pricing">
                       
                        <div class="col-md-4 col-sm-4 col-xs-12">
                            <div class="pricing-table">
                                <div class="pricing-header">
                                    <p class="pricing-title myTitle">Easy Plan </p>
									<input type="hidden" value="1 " name="plan_Id" class="plan_Id">
                                    
                                    <p class="pricing-rate">₹ 1000 <br><span>Including All Tax</span></p>
																		
									 <a class="btn btn-custom payNow">Buy Now</a>
																		
                                </div>

                                <div class="pricing-list">
                                    <ul>
									  <li>Contacts details up to : 25</li>
									   <li>Bonus Contact details up to : 2</li>
									   <li>Area Master Assistance : No</li>
									   <li>Contact details through sms : Yes</li>
								   </ul>
                                </div>
                            </div>
                        </div>
                         
                        <div class="col-md-4 col-sm-4 col-xs-12">
                            <div class="pricing-table">
                                <div class="pricing-header">
                                    <p class="pricing-title myTitle">Cool Plan </p>
									<input type="hidden" value="2 " name="plan_Id" class="plan_Id">
                                    
                                    <p class="pricing-rate">₹ 2000 <br><span>Including All Tax</span></p>
																		
									<a class="btn btn-custom payNow">Buy Now</a>
																		
                                </div>

                                <div class="pricing-list">
                                    <ul>
									  <li>Contacts details up to : 48</li>
									   <li>Bonus Contact details up to : 4</li>
									   <li>Area Master Assistance : Yes</li>
									   <li>Contact details through sms : Yes</li>
								   </ul>
                                </div>
                            </div>
                        </div>
                         
                        <div class="col-md-4 col-sm-4 col-xs-12">
                            <div class="pricing-table">
                                <div class="pricing-header">
                                    <p class="pricing-title myTitle">Free Plan </p>
									<input type="hidden" value="3 " name="plan_Id" class="plan_Id">
                                    
                                    <p class="pricing-rate">₹ 0 <br><span>Including All Tax</span></p>
									                                
                                    <a class="btn btn-custom payNow" style="">Enroll Now</a>
																		
																		
                                </div>

                                <div class="pricing-list">
                                    <ul>
									  <li>Contacts details up to : 5</li>
									   <li>Bonus Contact details up to : 00</li>
									   <li>Area Master Assistance : No</li>
									   <li>Contact details through sms : Yes</li>
								   </ul>
                                </div>
                            </div>
                        </div>
                       </div>
                </div>
        </section>

		</div>

		<div class="col-md-1 "></div>
		</div>

		</div>
    ＆＃13;
    ＆＃13;
    ＆＃13;

2 个答案:

答案 0 :(得分：2)

您可以使用HTML5的数据属性，并使用以下方式在jQuery中获取值。

＆＃13;
＆＃13; 
 $(".payNow").on("click", function(e) {
    var $list = $(this).closest(".pricing-table");
      name = $list.find(".myTitle").text();
      contact_upto = $list.find(".pricing-list ul").attr("data-contact-upto");
      bonus_upto = $list.find(".pricing-list ul").attr("data-bonus-upto");
      AMA = $list.find(".pricing-list ul").attr("data-AMA");
      sms = $list.find(".pricing-list ul").attr("data-sms");
      console.log(contact_upto);
  });
＆＃13; 
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<body>
<body>
		<div class="container-fluid plan-background" style="margin-top: 0%;padding-right: 0px;padding-left: 0px;">
		<div class="container main_btm" style="padding-left: 0px;padding-right: 0px; ">

		<div class="row top" style="margin-left: 0px;margin-right: 0px;margin-top:22px;">
         
		<div class="col-md-5 col-sm-6 hidden-xs" class-align="right" style="margin-top: 10px;padding:left:23px; ">

		</div>
		<div class="col-md-3 col-sm-6 col-xs-12 mobile-property-list" style="margin-top: 10px; padding-left: 27px;"><h4 style="color:#fff;font-size:20px;"> Select Your Plan</h4></br>  </div>
		<div class="col-md-4 col-sm-0 hidden-xs"></div>

		</div>

		<div class="row mobile-filter"  style="margin-top: 5px; margin-left: 0px;margin-right: 0px;margin-bottom:5%;" >

		<div class="col-md-1"></div>
		<div class="col-md-10 top-a rentListing" style="padding-left:0px;">

		<section id="pricing-table">
                <div class="row pricelistNew">
                    <div class="pricing">
                       
                        <div class="col-md-4 col-sm-4 col-xs-12">
                            <div class="pricing-table">
                                <div class="pricing-header">
                                    <p class="pricing-title myTitle">Easy Plan </p>
									<input type="hidden" value="1 " name="plan_Id" class="plan_Id">
                                    
                                    <p class="pricing-rate">₹ 1000 <br><span>Including All Tax</span></p>
																		
									 <a class="btn btn-custom payNow">Buy Now</a>
																		
                                </div>

                                <div class="pricing-list">
                                    <ul data-contact-upto="25" data-bonus-upto="2" data-AMA="No" data-sms="Yes">
									  <li>Contacts details up to : 25</li>
									   <li>Bonus Contact details up to : 2</li>
									   <li>Area Master Assistance : No</li>
									   <li>Contact details through sms : Yes</li>
								   </ul>
                                </div>
                            </div>
                        </div>
                         
                        <div class="col-md-4 col-sm-4 col-xs-12">
                            <div class="pricing-table">
                                <div class="pricing-header">
                                    <p class="pricing-title myTitle">Cool Plan </p>
									<input type="hidden" value="2 " name="plan_Id" class="plan_Id">
                                    
                                    <p class="pricing-rate">₹ 2000 <br><span>Including All Tax</span></p>
																		
									<a class="btn btn-custom payNow">Buy Now</a>
																		
                                </div>

                                <div class="pricing-list">
                                   <ul data-contact-upto="48" data-bonus-upto="4" data-AMA="Yes" data-sms="Yes">
									  <li>Contacts details up to : 48</li>
									   <li>Bonus Contact details up to : 4</li>
									   <li>Area Master Assistance : Yes</li>
									   <li>Contact details through sms : Yes</li>
								   </ul>
                                </div>
                            </div>
                        </div>
                         
                        <div class="col-md-4 col-sm-4 col-xs-12">
                            <div class="pricing-table">
                                <div class="pricing-header">
                                    <p class="pricing-title myTitle">Free Plan </p>
									<input type="hidden" value="3 " name="plan_Id" class="plan_Id">
                                    
                                    <p class="pricing-rate">₹ 0 <br><span>Including All Tax</span></p>
									                                
                                    <a class="btn btn-custom payNow" style="">Enroll Now</a>
																		
																		
                                </div>

                                <div class="pricing-list">
                                    <ul data-contact-upto="5" data-bonus-upto="0" data-AMA="No" data-sms="Yes">
									  <li>Contacts details up to : 5</li>
									   <li>Bonus Contact details up to : 00</li>
									   <li>Area Master Assistance : No</li>
									   <li>Contact details through sms : Yes</li>
								   </ul>
                                </div>
                            </div>
                        </div>
                       </div>
                </div>
        </section>

		</div>

		<div class="col-md-1 "></div>
		</div>

		</div>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

只需将文本值包装在<?php $a = 'C8'; $b = 0xC8; $c = doWhatHere($a); $b === $c; // true 标记内，并提供合适的类。

span
  $(function(){
 
 
  $(".payNow").on("click", function(e) {
    var $list = $(this).closest(".pricing-table");
      name = $list.find(".myTitle").text();
      console.log(name);
	  var parentEl= $(this).parents().closest('.pricing-header');
	  var nextEl= $(parentEl).next().children();
	  console.log('Contact Details :'+$(nextEl).children().find('.contactDetails').text()); 
	  console.log('Bonus Contact :'+$(nextEl).children().find('.bonusContacts').text()); 
	  console.log('Area Master :'+$(nextEl).children().find('.areaMaster').text()); 
	  console.log('Contact details SMS :'+$(nextEl).children().find('.ContactDetailsSMS').text()); 
	 });
  });

相关问题
最新问题