Question

我有一个客户可以通过表单预订的活动日期列表。目前，我在onclick标记附加了一些繁琐的<a>脚本：

<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插件滚动页面，在表单上设置日期输入，在表单上设置场地输入，并禁用复选框。每个场地都有多个日期，因此它添加了大量代码并且通常很讨厌。

我不能将所有这些包装成一个整洁的功能，但我如何才能获得相关的场地和日期文本，记住日期各不相同，有多个场地？

Answer 1

$('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中的代码。在jQuery中访问ID是#[id]，更多信息在jQuery site

上

Answer 2

这是脚本：

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>

从多个HTML元素中获取值

2 个答案: