javascript - 如何在 onclick 按钮中获取计划详细信息-6ren

javascript - 如何在 onclick 按钮中获取计划详细信息

转载作者：行者123 更新时间：2023-12-01 02:38:42

这里我有一个表格和三个按钮，假设如果我单击“立即注册”按钮意味着我已经获取了计划详细信息，例如

详细联系信息最多？
奖金联系方式最多可达？
区域大师协助:否？
通过短信提供详细联系信息？

以上数值我想取怎么取？我尝试过可以获取我选择的计划名称，但无法获取计划详细信息

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

    console.log(name);
  });

<!-- 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>

最佳答案

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

 $(".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);
  });

<!-- 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>

关于javascript - 如何在 onclick 按钮中获取计划详细信息，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47711649/

文章推荐： python - 如何在 Python 中将可变长度值追加到列表中

文章推荐： python - 通过python访问放置在多个目录中的文件

文章推荐： jquery - 当数据来自服务器端时，ThickBox 不工作

一篇文章带你入门Java多线程(详细)
目录进程其他相关概念创建线程的两种方式为什么使用start（）方法而不直接使用run（）方法 start（）方法底层
CURL状态码列表(详细)
CURL状态码列表状态码状态原因解释 0 正常访问
php常用ODBC函数集(详细)
ODBC连接类函数 odbc_connect函数：打开一个ODBC连接 odbc_close函数：关闭一个已经打开的ODBC连接 odbc_close_all函数：关闭所有已经打开的ODBC连
c++ - (详细)如何计算从时期1900到现在使用boost的持续时间？
作为标题，如何计算从纪元1900到现在使用boost的持续时间？编辑:很抱歉以前的问题太短。我将再次描述我的问题。我有关于将生日另存为整数的问题。我创建了四个函数，用法如下: ptime转换为整数
Java的Synchronized关键字学习指南(全面 & 详细)
前言在Java中，有一个常被忽略但非常重要的关键字Synchronized今天，我将详细讲解 Java关键字Synchronized的所有知识，希望你们会喜欢目录 1. 定义 J
java - 详细 JVM 垃圾收集日志的时间戳是收集的开始还是结束？
详细 JVM 垃圾收集日志的时间戳是收集的开始还是结束？ 2016-08-09T21:04:19.756-0400: 224890.317: [GC Desired survivor size 167
ios - 详细 View 中的后退按钮
我在“Master-Detail”概念上苦苦挣扎，除了一点点(但很重要)的细微差别外，几乎所有东西都按预期工作。我应该在 Storyboard上更改什么以在详细信息 View (屏幕截图底部的右上角)
iphone - 详细 View 仅显示在屏幕的表格区域？
我希望能够显示表格的详细 View ，但不推送新屏幕，而只显示表格所在的详细 View 。设置它的最佳方式是什么......如果真的可行的话？ ---------------------------
python - 详细 View 中的分页
我在我的博客中为我的帖子使用了详细 View ，每篇帖子都有评论，所以我想对它们进行分页，但我不知道该怎么做，因为我请求了帖子模型。我知道如何在功能 View 中执行此操作，但不知道如何在详细 Vie
c++ - 详细 move 语义
在下面的代码中，与 pm 对齐，该行是否会 move 整个内存并将其分配给 pm，或者它只会 move p 指向的内存而不是整个数组？ int main() { int*
winx64下mysql5.7.19的基本安装流程(详细)
1·下载 https://dev.mysql.com/downloads/mysql/ 2·安装服务 1)管理员运行cmd 2)D: 3)cd D:\mysql
SQL Server 2008安装图解(详细)
今天以前一直用的SQL Server 2005做开发，偶尔也用MySQL，现入手公司项目，用到SQL Server 2008,于是乎必须安装它，免得出现其他很纠结的小问题，现将自己安装图解分享如下：
linux(centos)中的cron计划任务配置方法[详细]
1. crontab命令选项复制代码代码如下: #crontab -u <-l, -r, -e> -u指定一个用
wpf - 主/详细 UI 最佳实践？
我们有一个 WPF 应用程序，它有一个主窗口/详细信息窗口，两者都是 WPF 数据网格。当您在上部数据网格中选择一行时，详细信息将显示在下部数据网格中。我想知道从 UI 的角度来看是否有任何关于如何处
version-control - 详细 p4 同步
在可视化 Perforce 客户端 (p4v) 中有一个选项: 显示文件操作的 p4 命令输出启用后，在日志 Pane 中，我可以看到这样的详细日志记录: p4 sync /Users/az/ftp
python - 使Python错误消息更加详细/详细/特定-是否可能？
在其他服务器上设置测试环境后，在几个API调用中出现错误。 99％肯定这是MySQL的事情，但是返回的错误根本没有帮助: global name 'sys' is not defined" 我已经导入
ios - UISplitViewController - 详细 View 尺寸错误
我正在维护一个通用的 iOS 应用程序，其开发已开始于 iOS 6。我正在为 iOS 7 更新 UI。现在我遇到了应用程序的 iPad 部分的奇怪问题。这部分遵循使用 UISplitViewContr
uitableview - UISplitViewController 详细 View 不在旋转时调整大小
我希望我能正确描述这种情况。当它发生时很容易在屏幕上看到，但很难用语言解释，但我会尽力而为。我有一个带有固定主视图 (UITableView) 和两个详细 View 之一的 UISplitViewC
Java 详细 GC 日志配置 - 未创建文件
我尝试在 eclipse 和 intelliJ 参数中使用垃圾收集记录器来配置简单的测试程序。尝试了不同类型的配置，但尚未创建日志文件。 -XX:+PrintGCDetails -XX:+PrintG
详细 View 中的 java 卡小程序部署
正如您所知，.cap 文件中的 java 小程序的输出文件格式必须通过智能卡读卡器/写卡器(如 ACR122 或任何其他读卡器)部署到 java 卡，而且我相信 java 卡与 java 卡之间的部署

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 如何在 onclick 按钮中获取计划详细信息