Question

我想在jquery中创建一个动态列表。这意味着每次用户在输入框中放入内容并按下按钮时，它都会将项目放在屏幕上。但我在使用此代码时遇到问题：

<!DOCTYPE html>
<html>
<head>
    <script type='text/javascript' src='jquery-3.1.1.min.js'></script>
    <script type='text/javascript' src='jquery-ui/jquery-ui.js'></script>

    <script type='text/javascript'>
        $(document).ready(function(){
            $('button').click(function(){
                $('#content').append("<p>" . $('#box').val() . "</p>");
            });
    });
    </script>
</head>

<body>
    <input type='text' id='box' />
    <button>Submit</button>
    <div id='content'>

    </div>
</body>
</html>

Answer 1

你的代码被破坏了。您可以使用+而不是.

 <!DOCTYPE html>
<html>
<head>
    <script type='text/javascript' src='jquery-3.1.1.min.js'></script>
    <script type='text/javascript' src='jquery-ui/jquery-ui.js'></script>

    <script type='text/javascript'>
        $(document).ready(function(){
            $('button').click(function(){
                var toAdd = $('input[name=checkListItem]').val();
                $('.content').append('<div class="item">' + toAdd + '</div>');
            });
    });
    </script>
</head>

<body>
<form name='checkList'>
    <input type='text' name='checkListItem' />
</form>
<button>Submit</button>
    <div class='content'>

    </div>
</body>
</html>

Answer 2

更改

 $('#content').append("<p>" . $('#box').val() . "</p>");

收件人：

$('#content').append("<p>" + $('#box').val() + "</p>");

最终代码：

＆＃13;

 $(document).ready(function(){
     
     $('button').click(function(){
         
         $('#content').append("<p>" + $('#box').val() + "</p>");
         
     })
     
 })

＆＃13;

<input type='text' id='box' />
<button>Submit</button>
<div id='content'>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

＆＃13;

jquery不会从inputbox附加值

2 个答案: