[英]jquery .bind or .change to populate span tag value from calendar onclick
I have a booking form where end users can reserve the date they wish, On occasion this can change right up to the payment page, If a date they previously tried to select becomes available they are notified and given the chance to change the date. 我有一个预订表,最终用户可以保留他们想要的日期,有时可以在付款页面上更改,如果他们以前尝试选择的日期可用,他们会收到通知并有机会更改日期。
I need to be able to populate/change/bind to a span tag that already has text rendered when the dom loads, for example: 我需要能够填充/更改/绑定到在dom加载时已经呈现文本的span标签,例如:
<span id="ReservationDate" name="ReservationDate">Your reservation date: 23/03/2016</span>
If they click to change the date a calendar provides the available dates and onclick selects the date with the following example attributes: 如果他们单击以更改日期,则日历将提供可用日期,而onclick将选择具有以下示例属性的日期:
<td data-day="23" class="is-selected"><button class="pika-button" type="button">23</button></td>
<td data-day="24" class=""><button class="pika-button" type="button">24</button></td>
I need to be able to bind the date attribute for example: data-day="24"
that they select to the span tag without having to change the span tag to an input field as this will break the css and page layout. 我需要能够绑定日期属性,例如:他们选择的
data-day="24"
到span标签,而不必将span标签更改为输入字段,因为这会破坏CSS和页面的布局。
As a total newbie in jquery and javascript i would be very greatful if anyone can lend a helping hand on this, it will mean a lot and be very appreicated. 作为jquery和javascript的新手,如果有人可以帮上忙,我将非常感激,这将意味着很多并且非常感激。
Thankyou. 谢谢。
Short update: 简短更新:
<div class="PaymentForm-ReservationDate">
<span id="ReservationDate" name="ReservationDate">Date: {{ $getResDate }}</span><br/>
<a href="" date-picker="" id="reservation-date">Change Date?</a>
</div>
Try this: 尝试这个:
var span = document.getElementById( 'ReservationDate' );
var updateDate = function(){
span.innerHTML = 'Your reservation date: ' + this.dataset.day + span.innerHTML.slice( -8 );
};
var tds = document.getElementsByTagName( 'td' );
for( var i=0; i<tds.length; i++ )
tds[i].onclick = updateDate;
I'm not sure if this solve your issue, but there is the code: 我不确定这是否可以解决您的问题,但是有以下代码:
$(document).on('click', '.pika-button', function(){
var dataDay = $(this).parent('td').attr('data-day');
$('span#ReservationDate').text('Your reservation date: ' + dataDay + '/03/2016')
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.