Question

我正在尝试创建一个webapp，根据提供的参数找到所选形状的区域。

所以我被困了一半。

单击单选按钮时，参数文本框应加载值div。我尝试使用jquery来实现此功能，但是当选中单选按钮时，文本框不会加载到div中。

请帮忙。我无法找到我错的地方。

JQuery的

$(document).ready(function(){
    $('input[type="radio"]').click(function(){
        if($(this).attr("value")=="circle")
        {
           $('.values').innerHTML="<table class='table table-default'><tbody><tr><td>
           <label for='circlerad'>Radius:</label></td><td><input type='text'
            class='form-control' name='circlerad' maxlength='10'></td></tr></tbody>
            </table>";
        }
        if($(this).attr("value")=="square")
        {
            $('.values').innerHTML="<table class='table table-default'><tbody><tr><td>
           <label for='sqside'>Side-length</label></td><td><input type='text'
            class='form-control' name='sqside' maxlength='10'></td></tr></tbody>
            </table>";
        }
        if($(this).attr("value")=="rectangle")
        {
            $('.values').innerHTML="<table class='table table-default'><tbody><tr><td>
           <label for='reclen'>Length:</label></td><td><input type='text'
            class='form-control' name='reclen' maxlength='10'></td></tr>
            <tr><td>
           <label for='recbr'>Breadth:</label></td><td><input type='text'
            class='form-control' name='recbr' maxlength='10'></td></tr>
            </tbody>
            </table>";
        }
    });
});

HTML / PHP的

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Area Finder</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>

  <?php

    echo("<center><h1>Area Finder!</h1></center><div class='conatiner'><div class='row'><form role='form' action='./arearesult.php' method='POST'><div class='form-group'><div class='panel panel-primary col-xs-3'><div class='panel-heading'>Select a shape</div><div class=' panel-body'>");
    echo("<table class='table table-default'><tbody>");
    echo("<tr><td>Circle</td><td><input type='radio' name=shape value='circle'></td></tr>
      <tr><td>Square</td><td><input type='radio' name=shape value='square'></td></tr>
      <tr><td>Rectangle</td><td><input type='radio' name=shape value='rectangle'></td></tr></tbody></table></div></div></div>");
    echo("<div class='col-xs-1'></div><div class='panel panel-primary col-xs-5'><div class='panel-heading'>Enter values</div>");
    echo("<div class='values panel-body'><table class='table table-default'><tbody>");

    echo("</form></div></div>");
  ?>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
    <script src='js/parameters.js'></script>
  </body>
</html>

area finder webpage

Answer 1

问题出在$('.values').innerHTML分配上。

应该是这样的。

$(document).ready(function() {
  $('input[type="radio"]').click(function() {
    if ($(this).attr("value") == "circle") {
      $('.values').html("<table class='table table-default'><tbody><tr><td>" +
    "<label for='circlerad'>Radius:</label></td><td><input type='text' " +
    "class='form-control' name='circlerad' maxlength='10'></td></tr></tbody>" +
    "</table>");
    }
    if ($(this).attr("value") == "square") {
      $('.values').html("<table class='table table-default'><tbody><tr><td>" +
    "<label for='sqside'>Side-length</label></td><td><input type='text'" +
    "class='form-control' name='sqside' maxlength='10'></td></tr></tbody>" +
    "</table>");
    }
    if ($(this).attr("value") == "rectangle") {
      $('.values').html("<table class='table table-default'><tbody><tr><td>" +
    "<label for='reclen'>Length:</label></td><td><input type='text'" +
    "class='form-control' name='reclen' maxlength='10'></td></tr>" +
    "<tr><td>" +
    "<label for='recbr'>Breadth:</label></td><td><input type='text'" +
    "class='form-control' name='recbr' maxlength='10'></td></tr>" +
    "</tbody>" +
    "</table>");
    }
  });
});

更新：已更改为$('.values').html()，请参阅工作人员https://jsfiddle.net/u0hd5Lmq/

阅读https://davidwalsh.name/multiline-javascript-strings

Answer 2

您将代码更改为此格式可以使用

$('.values').html("<table class='table table-default'><tbody><tr><td>
           <label for='circlerad'>Radius:</label></td><td><input type='text'
            class='form-control' name='circlerad' maxlength='10'></td></tr></tbody>
            </table>");

Jquery不起作用 - radiobutton

2 个答案: