javascript - jQuery:按类更新带有日期选择器输入值的 span 标签?

标签 javascript jquery dom

我怎样才能用日期选择器的值只更新标签/类=“able” 存储在 <input id="datepicker">领域?

步骤:

  1. 点击“日期选择器”输入框;日期日历打开。
  2. 选择您的日期; “datepicker”输入字段填充了所选日期。
  3. 点击“加载”按钮。
  4. <span>带有 class="able" 的标签值现在等于“datepicker”输入字段值。

HTML

<html lang="en">
<head>
<meta charset="UTF-8" />
<title>jQuery Pass Value Input to SPAN2</title>
<link rel="stylesheet" href="themes/base/jquery.ui.all.css">
<script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script>
<script src="js/jquery-1.6.2.min.js"></script>
<script src="ui/jquery.ui.core.js"></script>
<script src="ui/jquery.ui.datepicker.js"></script>
<script>
$(function() {
    $( "#datepicker" ).datepicker();
});
</script>
</head>
<body>

<div>
<p>Date: <input id="datepicker" type="text"></p>
<br>
<input type="Button" id="button1" Value="LOAD">
</div>

<span id="result1" class="able"> </span>
<span id="result2" class="able"> </span>
<span id="result3" class="able"> </span>

<span id="result4" class="baker"> </span>
<span id="result5" class="baker"> </span>

<span id="result6" class="charlie"> </span>
</body>
</html>

最佳答案

您需要将一个 onclick 事件绑定(bind)到加载按钮,并且在 onclick 函数中您需要设置跨度文本,如下所示,

 $('#button1').click (function () {
      $('span.able').text($('#datepicker').val());
});

DEMO

关于javascript - jQuery:按类更新带有日期选择器输入值的 span 标签?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8704782/

相关文章:

javascript - *整个*文档中某个元素之后的下一个元素

javascript - 如何在EJS中使用DOM功能

javascript - jQuery 将 iframe 附加到 div 而无需重新加载

c# - Kendo UI - 上传按钮 - 自定义

javascript - JQuery 响应类型是字符串而不是文档对象

javascript - 如何从ajax php获取值(无法获取)

javascript - 如何找出元素实际使用的字体?

javascript - 使用 CasperJS 双击

javascript - 如何根据用户输入动态创建正则表达式

javascript - 添加动画以更改背景图像幻灯片