从多个HTML元素中获取值

时间:2013-12-02 10:11:15

标签: javascript jquery

我有一个客户可以通过表单预订的活动日期列表。目前,我在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插件滚动页面,在表单上设置日期输入,在表单上设置场地输入,并禁用复选框。每个场地都有多个日期,因此它添加了大量代码并且通常很讨厌。

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

2 个答案:

答案 0 :(得分: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

答案 1 :(得分:1)

这是脚本:

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>