jQuery:按类更新带有datepicker输入值的标签?

时间:2012-01-02 19:54:29

标签: javascript jquery dom

如何使用datepicker值更新tags / class =“able” 存储在<input id="datepicker">字段中?

步骤:

  1. 点击“datepicker”输入字段;日期日历打开。
  2. 选择您的日期; “datepicker”输入字段填充了所选日期。
  3. 点击“加载”按钮。
  4. 具有<span>值的
  5. class="able"标记现在等于“datepicker”输入字段值。
  6. 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>
    

3 个答案:

答案 0 :(得分:2)

您需要将onclick事件绑定到加载按钮,并在onclick函数内部设置跨度文本,如下所示

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

<强> DEMO

答案 1 :(得分:0)

这是执行此操作的JQuery代码:

$("span.able").text($("#datepicker").text());

以上代码的作用是,选择所有span标签,class =“able”。然后,它将其内部文本设置为文本框中显示的值,ID = datepicker。

以下是text()函数的文档: http://api.jquery.com/text/

答案 2 :(得分:0)

$("Load-button-selector").click( function(){
    $("span.able").html( $("datepicker-filed-selector").val() );
});