从多个HTML元素中获取值

Getting values from multiple HTML elements

本文关键字：获取 元素 HTML      更新时间：2024-01-11

我有一个活动日期列表，客户可以通过表格预订。目前，我在<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>

这将使用animatescrolljquery插件滚动页面，在表单上设置日期输入，在表单中设置地点输入，并禁用复选框。每个场地都有多个日期，所以它添加了很多代码，而且通常很糟糕。

我不想把所有这些都打包成一个整洁的功能，但考虑到日期不同，而且有多个场地，我如何才能使用相关的场地和日期文本？

下面是脚本：

function updateDetails(loc, date) {
   $('#buy-form').animatescroll({scrollSpeed:700,easing:'easeInOutSine'});    
   document.getElementById('date').value= date; 
   document.getElementById('venue').value= loc;   
   $('#resicheck').attr('disabled', true);
}

这是标记：

<h4>New York</h4>
<a href="javascript:updateDetails('New York', '20-24 January');">20-24 January</a>
<a href="javascript:updateDetails('New York', '24-28 January');">24-28 January</a>
<h4>New Jersey</h4>
<a href="javascript:updateDetails('New Jersey', '10-14 January');">10-14 January</a>

$('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网站

相关文章：