个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我在 bootstrap 和 jQuery 中处理自定义 slider 表单，我可以在单击单选按钮、按钮等时获取表单字段值。我的问题是我想将所有这些值按顺序存储，如 JavaScript 对象、数组或 JSON 等来处理所有信息，但我无法连续存储这些值以从这些字段中获取一个人的信息。
我的 HTML 代码是:
<div id="carousel-personal-loan" class="carousel slide">
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<div class="row per-loan-gender">
<div class="col-xs-4"></div>
<div class="col-xs-4">
<div class="row male_or_female">
<div class="quote-title" msg="Please select your gender">My gender<span class="label label-danger"></span></div>
<div class="col-xs-6 male">
<label>
<img src="1.png" />
<div>
<input type="radio" name="gender" id="male" value="male" class="next-slide">
</div>
<span>Male</span>
</label>
</div>
<div class="col-xs-6 female">
<label>
<img src="2.png" />
<div>
<input type="radio" name="gender" id="female" value="female" class="next-slide">
</div>
<span>Female</span>
</label>
</div>
</div>
</div>
<div class="col-xs-4"></div>
</div>
<div class="row nxt-prev-btn">
<div class="col-xs-4"></div>
<div class="col-xs-4">
<button type="button" class="btn btn-default next-slide">Next</button>
</div>
<div class="col-xs-4"></div>
</div>
</div>
<div class="item">
<div class="row per-loan-city">
<div class="quote-title" msg="Where do you live currently?">Where do you live currently?<span class="label label-danger"></span></div>
<div class="col-xs-1"></div>
<div class="col-xs-2">
<label>
<img src="3.png" width="130" height="130">
<div>
<input type="radio" name="livecity" id="hyderabad" value="hyderabad" class="next-slide">
</div>
<span>Hyderabad</span>
</label>
</div>
<div class="col-xs-2">
<label>
<img src="4.png" width="130" height="130">
<div>
<input type="radio" name="livecity" id="chennai" value="chennai" class="next-slide">
</div>
<span>Chennai</span>
</label>
</div>
<div class="col-xs-2">
<label>
<img src="5.png" width="130" height="130">
<div>
<input type="radio" name="livecity" id="bangalore" value="bangalore" class="next-slide">
</div>
<span>Bangalore</span>
</label>
</div>
<div class="col-xs-2">
<label>
<img src="6.png" width="130" height="130">
<div>
<input type="radio" name="livecity" id="hosur" value="hosur" class="next-slide">
</div>
<span>Hosur</span>
</label>
</div>
<div class="col-xs-2">
<label>
<img src="7" width="130" height="130">
<div>
<input type="radio" name="livecity" id="other_city" value="other city" class="next-slide">
</div>
<span>Other City</span>
</label>
</div>
<div class="col-xs-1"></div>
</div>
<div class="row nxt-prev-btn">
<div class="col-xs-2"></div>
<div class="col-xs-2"></div>
<div class="col-xs-2">
<button type="button" class="btn btn-default prev-slide">Previous</button>
</div>
<div class="col-xs-2">
<button type="button" class="btn btn-default next-slide">Next</button>
</div>
<div class="col-xs-2"></div>
<div class="col-xs-2"></div>
</div>
</div>
<div class="item" id="SalOrSelf">
<div class="row per-loan-sources">
<div class="quote-title" msg="Are You">Are You<span class="label label-danger"></span></div>
<div class="col-xs-4"></div>
<div class="col-xs-4">
<div class="row sal_or_self">
<div class="col-xs-6 male">
<label>
<img src="8.png" />
<div>
<input type="radio" name="salorself" id="salaried" value="salaried" class="next-slide">
</div>
<span>Salaried</span>
</label>
</div>
<div class="col-xs-6 female">
<label>
<img src="9.png" />
<div>
<input type="radio" name="salorself" id="selfemp" value="selfemp" class="next-slide">
</div>
<span>Self-employed</span>
</label>
</div>
</div>
</div>
<div class="col-xs-4"></div>
</div>
<div class="row nxt-prev-btn">
<div class="col-xs-3"></div>
<div class="col-xs-3">
<button type="button" class="btn btn-default prev-slide">Previous</button>
</div>
<div class="col-xs-3">
<button type="button" class="btn btn-default next-slide">Next</button>
</div>
<div class="col-xs-3"></div>
</div>
</div>
<div id="salcont"></div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-personal-loan" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-personal-loan" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
我的 jQuery 和对象创建代码是:
jQuery(".active input[type=radio]" ).live( "click", function() {
var getAllValues = jQuery(this).val();
alert(getAllValues); //Able to get all the values here when click on fields in slider
var getQuote = { "maleOrFemale":"MaleOrFemale", "currentCity":"YourCity", "Profession":"salOrSelf" };
getQuote.maleOrFemale = getAllValues; //Not be able to Modify value in above getQuote Object
getQuote.currentCity = getAllValues; //Not be able to Modify value in above getQuote Object
getQuote.Profession = getAllValues; //Not be able to Modify value in above getQuote Object
console.log(getQuote); //Not showing proper results as I want to modify all above objects as per form field selection
});
最佳答案
试试这个 .use with on()而不是 live() 并且还使用 change 事件而不是 click 。从 name(attr('name')) 创建对象键的更好方法输入标签的
工作示例已更新
var getQuote = { };
jQuery("input[type=radio] , select").on("change", function() { // select tag was added
$("input[type=radio]:checked ,select").each(function(a){ // selected value pass with object
getQuote[$(this).attr('name')] = jQuery(this).val();
})
console.log(getQuote);
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="selected">
<option value="one">one</option>
<option value="two">two</option>
</select>
<div id="carousel-personal-loan" class="carousel slide">
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<div class="row per-loan-gender">
<div class="col-xs-4"></div>
<div class="col-xs-4">
<div class="row male_or_female">
<div class="quote-title" msg="Please select your gender">My gender<span class="label label-danger"></span></div>
<div class="col-xs-6 male">
<label>
<img src="1.png" />
<div>
<input type="radio" name="gender" id="male" value="male" class="next-slide">
</div>
<span>Male</span>
</label>
</div>
<div class="col-xs-6 female">
<label>
<img src="2.png" />
<div>
<input type="radio" name="gender" id="female" value="female" class="next-slide">
</div>
<span>Female</span>
</label>
</div>
</div>
</div>
<div class="col-xs-4"></div>
</div>
<div class="row nxt-prev-btn">
<div class="col-xs-4"></div>
<div class="col-xs-4">
<button type="button" class="btn btn-default next-slide">Next</button>
</div>
<div class="col-xs-4"></div>
</div>
</div>
<div class="item">
<div class="row per-loan-city">
<div class="quote-title" msg="Where do you live currently?">Where do you live currently?<span class="label label-danger"></span></div>
<div class="col-xs-1"></div>
<div class="col-xs-2">
<label>
<img src="3.png" width="130" height="130">
<div>
<input type="radio" name="livecity" id="hyderabad" value="hyderabad" class="next-slide">
</div>
<span>Hyderabad</span>
</label>
</div>
<div class="col-xs-2">
<label>
<img src="4.png" width="130" height="130">
<div>
<input type="radio" name="livecity" id="chennai" value="chennai" class="next-slide">
</div>
<span>Chennai</span>
</label>
</div>
<div class="col-xs-2">
<label>
<img src="5.png" width="130" height="130">
<div>
<input type="radio" name="livecity" id="bangalore" value="bangalore" class="next-slide">
</div>
<span>Bangalore</span>
</label>
</div>
<div class="col-xs-2">
<label>
<img src="6.png" width="130" height="130">
<div>
<input type="radio" name="livecity" id="hosur" value="hosur" class="next-slide">
</div>
<span>Hosur</span>
</label>
</div>
<div class="col-xs-2">
<label>
<img src="7" width="130" height="130">
<div>
<input type="radio" name="livecity" id="other_city" value="other city" class="next-slide">
</div>
<span>Other City</span>
</label>
</div>
<div class="col-xs-1"></div>
</div>
<div class="row nxt-prev-btn">
<div class="col-xs-2"></div>
<div class="col-xs-2"></div>
<div class="col-xs-2">
<button type="button" class="btn btn-default prev-slide">Previous</button>
</div>
<div class="col-xs-2">
<button type="button" class="btn btn-default next-slide">Next</button>
</div>
<div class="col-xs-2"></div>
<div class="col-xs-2"></div>
</div>
</div>
<div class="item" id="SalOrSelf">
<div class="row per-loan-sources">
<div class="quote-title" msg="Are You">Are You<span class="label label-danger"></span></div>
<div class="col-xs-4"></div>
<div class="col-xs-4">
<div class="row sal_or_self">
<div class="col-xs-6 male">
<label>
<img src="8.png" />
<div>
<input type="radio" name="salorself" id="salaried" value="salaried" class="next-slide">
</div>
<span>Salaried</span>
</label>
</div>
<div class="col-xs-6 female">
<label>
<img src="9.png" />
<div>
<input type="radio" name="salorself" id="selfemp" value="selfemp" class="next-slide">
</div>
<span>Self-employed</span>
</label>
</div>
</div>
</div>
<div class="col-xs-4"></div>
</div>
<div class="row nxt-prev-btn">
<div class="col-xs-3"></div>
<div class="col-xs-3">
<button type="button" class="btn btn-default prev-slide">Previous</button>
</div>
<div class="col-xs-3">
<button type="button" class="btn btn-default next-slide">Next</button>
</div>
<div class="col-xs-3"></div>
</div>
</div>
<div id="salcont"></div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-personal-loan" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-personal-loan" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>关于javascript - 如何使用 JQuery 将 slider 中的所有表单值存储在对象、数组或 json 中？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44110430/
25
4
0
我正在运行一个辅助角色，并检查 Azure 上托管的存储中是否存在数据。当我将连接字符串用于经典类型的存储时，我的代码可以正常工作，但是当我连接到 V2 Azure 存储时，它会抛出此异常。 “远程服
在我的应用程序的主页上，我正在进行 AJAX 调用以获取应用程序各个部分所需的大量数据。该调用如下所示: var url = "/Taxonomy/GetTaxonomyList/" $.getJSO
大家好，我正在尝试将我的商店导入我的 Vuex Route-Gard。 路由器/auth-guard.js import {store} from '../store' export default
我正在使用 C# 控制台应用程序 (.NET Core 3.1) 从 Azure Blob 存储读取大量图像文件并生成这些图像的缩略图。新图像将保存回 Azure，并将 Blob ID 存储在我们的数
我想将 Mlflow 设置为具有以下组件: 后端存储(本地):在本地使用 SQLite 数据库存储 Mlflow 实体(run_id、params、metrics...) 工件存储(远程):使用 Az
我正在使用 C# 控制台应用程序 (.NET Core 3.1) 从 Azure Blob 存储读取大量图像文件并生成这些图像的缩略图。新图像将保存回 Azure，并将 Blob ID 存储在我们的数
我想将 Mlflow 设置为具有以下组件: 后端存储(本地):在本地使用 SQLite 数据库存储 Mlflow 实体(run_id、params、metrics...) 工件存储(远程):使用 Az
我的 Windows 计算机上的本地文件夹中有一些图像。我想将所有图像上传到同一容器中的同一 blob。 我知道如何使用 Azure Storage SDKs 上传单个文件BlockBlobServi
我尝试发出 GET 请求来获取我的 Azure Blob 存储帐户的帐户详细信息，但每次都显示身份验证失败。谁能判断形成的 header 或签名字符串是否正确或是否存在其他问题？ 代码如下: cons
这是用于编写 JSON 的 NeutralinoJS 存储 API。是否可以更新 JSON 文件(推送数据)，而不仅仅是用新的 JS 对象覆盖数据。怎么做到的？？？ // Javascript
我有一个并行阶段设置，想知道是否可以在嵌套阶段之前运行脚本，所以像这样: stage('E2E-PR-CYPRESS') { when { allOf {
我想从命令行而不是从GUI列出VirtualBox VM的详细信息。我对存储细节特别感兴趣。 当我在GUI中单击VM时，可以看到包括存储部分在内的详细信息: 但是到目前为止，我还没有找到通过命令行执行
我有大约 3500 个防洪设施，我想将它们表示为一个网络来确定流动路径(本质上是一个有向图)。我目前正在使用 SqlServer 和 CTE 来递归检查所有节点及其上游组件，只要上游路径没有 fork
谁能告诉我 jquery data() 在哪里存储数据以及何时删除以及如何删除？ 如果我用它来存储ajax调用结果，会有性能问题吗？ 例如: $("body").data("test", { myDa
有人可以建议如何为 Firebase 存储中的文件设置备份。我能够备份数据库，但不确定如何为 firebase 存储中的文件(我有图像)设置定期备份。 最佳答案 如何进行 Firebase 存储的本地
我最近开始使用 firebase 存储和 firebase 功能。现在我一直在开发从功能到存储的文件上传。 我已经让它工作了(上传完成并且文件出现在存储部分)，但是，图像永远保持这样(永远在右侧加载)
我想只允许用户将文件上传到他们自己的存储桶中，最大文件大小为 1MB，仍然允许他们删除文件。我添加了以下内容: match /myusers/{userId}/{allPaths=**} { al
使用生命周期管理策略将容器的内容从冷访问层移动到存档。我正在尝试以下策略，希望它能在一天后将该容器中的所有文件移动到存档层，但事实并非如此在职的。我设置了选择标准“一天未使用后”。 这是 json 代
对于连接到 Azure 存储端点，有 http 和 https 两个选项。 第一。 https 会带来开销，可能是 5%-10%，但我不支付同一个数据中心的费用。 第二。 http 更快，但 Auth
有人可以帮我理解这一点吗？我创建了Virtual Machine in Azure running Windows Server 2012 。我注意到 Azure 自动创建了一个存储帐户。当我进入该存
我是一名优秀的程序员,十分优秀！