Question

此代码适用于在线编译器以及stackoverflow，但为什么不在我的Web主机和localhost上。

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

        <script type="text/javascript">
    $('.radiogroup').on('change', function() {
      $('#amount').val( this.value );
    });</script></head>
    <body>
    <input type="radio" name="radiogroup" class="radiogroup" value="5" />
    <input type="radio" name="radiogroup" class="radiogroup" value="10" />
    <input type="radio" name="radiogroup" class="radiogroup" value="15" />
    <input type="radio" name="radiogroup" class="radiogroup" value="20" />
    <br /><br />
    <input type="text" name="amount" id="amount" /></body>
    </html>

Answer 1

你的头部和身体标签混合在一起。我已经更新它以正确显示头部和身体部分。

<html>
 <head>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script type="text/javascript">
      $('.radiogroup').on('change', function() {
        $('#amount').val( this.value );
      });
  </script>
 </head>
 <body>
  <input type="radio" name="radiogroup" class="radiogroup" value="5" />
  <input type="radio" name="radiogroup" class="radiogroup" value="10" />
  <input type="radio" name="radiogroup" class="radiogroup" value="15" />
  <input type="radio" name="radiogroup" class="radiogroup" value="20" />
  <br /><br />
  <input type="text" name="amount" id="amount" />
 </body>
</html>

Answer 2

您的头部和身体标签是混合的，如果您想使用html5，则不需要定义脚本类型，也不必使用尾部反斜杠声明非闭合标签。如果要使用早期版本的html，请使用该类型。如果你想使用xhtml，你必须使用尾部反斜杠来表示非闭合标签。

编辑：我发现，在呈现元素之前会触发您的代码，因此您尝试向当时不存在的元素添加事件处理程序。添加$（function（）{}）;代码周围将强制jQuery在触发文档就绪事件后运行代码。

<!DOCTYPE html>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
        <script>
          $(function() {
            $('.radiogroup').on('change', function() {
              $('#amount').val(this.value);
            });
           });
        </script>
    </head>
    <body>
        <input type="radio" name="radiogroup" class="radiogroup" value="5">
        <input type="radio" name="radiogroup" class="radiogroup" value="10">
        <input type="radio" name="radiogroup" class="radiogroup" value="15">
        <input type="radio" name="radiogroup" class="radiogroup" value="20">
        <br><br>
        <input type="text" name="amount" id="amount">
    </body>
</html>

Answer 3

在任何HTML元素（您的单选按钮）出现之前，您的Javascript运行得太早。您的选择器$('.radiogroup')然后找不到任何内容，单击单选按钮时没有任何反应。

在</body>结束标记之前移动您的Javascript，或者将您的代码包装在jQuery＆＃39; s .ready中，如下所示：

$(document).ready(function(){
  $('.radiogroup').on('change', function() {
    $('#amount').val( this.value );
  });
})

Localhost和Webhost错误

3 个答案: