Question

我很抱歉如果这是一个简单的问题，我是Scripting和html和JQuery的新手。我试图这样做，当按下1按钮时，它将显示框中的值。我之前使用Get Element By Id实现了它，但我现在正在尝试使用Jquery，我很困惑为什么我的下面的代码不会工作。谢谢你的帮助！

<html>
<head>
     <title>Page Title</title>
</head>

<script>
 $(document).ready(function(){
        $('#button1').click(function(){
              var number1 = "1";
              $('#output').html(number1);
    });
  });
</script>

<body>

<input type="text"   id="output">

<input type="button" name="one" value = "1" id="button1"> 

</body>
</html>

Answer 1

$(document).ready(function(){
    $('#button1').click(function(){
          alert($('#output').val());
    });
});

我猜你有点混淆了你的想法。 #output是您代码中的输入，因此您希望从中读取值。如果要将值打印到另一个元素，则必须附加一个并更改id，如下所示：

<input type="text" id="input">
<button id="button">Submit</button>
<span id="output"></span>

<script>
   $(document).ready(function(){
       $('#button').click(function(){
             // Always use .text() if you dont need html output.
             $('#output').text($('#input').val());
       });
   });
</script>

编辑：事实证明我有点混淆了我自己的想法;）我看到你要输出点击按钮的值，只需这样做：

$(document).ready(function(){    
    $('#button1').click(function(e){
        // Either use $(this) or $(e.target).
        $('#output').text($(this).val());
    });
});

您可能希望在jQuery中阅读this和$(this)上的this article。

Answer 2

 $(document).ready(function(){
        $('#button1').click(function(){
              var value = $(this).val();
              $('#output').val(value);
    });
  });

请参阅此处的工作示例：http://jsfiddle.net/jqnynLbm/

Answer 3

使用jquery使用$("#button1").attr("value")或$("#button1").val()

获取按钮值

如果要设置输入文本的值，请使用$('#output').val($(this).attr("value"))

最终的代码应该是

<html>
<head>
     <title>Page Title</title>
</head>

<script>
 $(document).ready(function(){
       $('#button1').click(function(){
            $('#output').val($(this).val());
        });
  });
</script>

<body>

<input type="text"   id="output">

<input type="button" name="one" value = "1" id="button1"> 

</body>
</html>

simple JSfiddle demo

Answer 4

起初，我认为你忘了调用jQuery。所以在标题区域添加它 -

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

第二，改变

$('#output').html(number1);

到

$('#output').val(number1); // use val because input tags contain value not html

如果您希望该值来自点击按钮，那么您可以动态使用

$(this).val(); // this will handle the selector which is clicked by you and its value

你可以把它放在变量中作为

var number1 = $(this).val();

如何使用JQuery在TextBox中显示按钮的值？

4 个答案: