从多个HTML元素获取值 [英] Getting values from multiple HTML elements

问题描述

我有客户可以通过表格预订的活动的日期列表.目前，我在<a>标签上附加了一些麻烦的onclick脚本:

<h4>New York</h4>
<a onclick="$('#buy-form').animatescroll({scrollSpeed:700,easing:'easeInOutSine'}); document.getElementById('date').value='20-24 January'; document.getElementById('venue').value='New York'; $('#resicheck').attr('disabled', true);">20-24 January</a>

这将使用animatescroll jquery插件滚动页面，在表单上设置日期输入，在表单上设置场所输入，并禁用复选框.每个地点都有多个日期，因此会增加很多代码，并且通常令人讨厌.

我没有将所有这些打包成一个整齐的函数，但是考虑到日期各不相同且有多个场所，我该如何获取相关的场所和日期文本呢?

解决方案

 $('a').on('click', function (e) {
    $('#buy-form').animatescroll({scrollSpeed:700,easing:'easeInOutSine'});
    $('#date').val('20-24 January');
    $('#venue').val('New York');
    $('#resicheck').attr('disabled', true);
});
 

一个链接就是这种情况.对于多个链接，您可以在每个不同的元素上附加一个数据元素，例如:

<a href="#" data-date="20-24 January" data-venue="New York">20-24 January</a>
<a href="#" data-date="22-25 January" data-venue="LA">22-25 January</a>

然后使用以下javascript

 $('a').on('click', function (e) {
    $('#buy-form').animatescroll({scrollSpeed:700,easing:'easeInOutSine'});
    $('#date').val($(this).data('date'));
    $('#venue').val($(this).data('venue'));
    $('#resicheck').attr('disabled', true);
});
 

您可以使用jQuery(和javascript)附加事件并以html格式删除代码.使用#[id]访问jQuery中的ID，有关更多信息，请参见 jQuery网站

I have a list of dates for events that customers can book via a form. At the moment, I have some cumbersome onclick script attached to <a> tags:

<h4>New York</h4>
<a onclick="$('#buy-form').animatescroll({scrollSpeed:700,easing:'easeInOutSine'}); document.getElementById('date').value='20-24 January'; document.getElementById('venue').value='New York'; $('#resicheck').attr('disabled', true);">20-24 January</a>

This scrolls the page using the animatescroll jquery plugin, sets the date input on the form, sets the venue input on the form, and disables a checkbox. There are multiple dates for each venue so it adds a lot of code and is generally nasty.

I'd lack to package all this into a neat function, but how can I get the relevant venue and date text to use, bearing in mind the dates vary and there are multiple venues?

解决方案

$('a').on('click', function (e) {
    $('#buy-form').animatescroll({scrollSpeed:700,easing:'easeInOutSine'});
    $('#date').val('20-24 January');
    $('#venue').val('New York');
    $('#resicheck').attr('disabled', true);
});

This is the case for one link. For multiple links you can attach a data element on every distinct element, for example:

<a href="#" data-date="20-24 January" data-venue="New York">20-24 January</a>
<a href="#" data-date="22-25 January" data-venue="LA">22-25 January</a>

And then use the following javascript

$('a').on('click', function (e) {
    $('#buy-form').animatescroll({scrollSpeed:700,easing:'easeInOutSine'});
    $('#date').val($(this).data('date'));
    $('#venue').val($(this).data('venue'));
    $('#resicheck').attr('disabled', true);
});

You can use jQuery (and javascript) to attach events and take out the code in html. Accessing an ID in jQuery is with #[id] and more information is on the jQuery site

这篇关于从多个HTML元素获取值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！