Question

我正在尝试编写一个代码，该代码将从用户那里获取输入并为输入创建一个可拖动的代码。我可以使用javascript编写HTML和CSS，但是当我尝试为jquery做同样的事情时;它不起作用。我哪里错了？

<html>
    <head>
    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>         
    <script>
        function init() {
            var op=document.getElementById("inputo").value;
            document.write("<style>" + "#" + op + "{color:red; height:50px; width:50px; border:1px       solid black ; border-radius:100%; line-height: 50px; }" +"<br>" + "</style>");
            document.write("<h1 id=" + op + ">" + op + "</h1>");
            document.write("<script>" "<br>"+ " $(document).ready(function() { #op.draggable();});"  +"</script>");
        }
    </script>
    </head>
    <body>
        Draggable: 
        <input type="text" id="inputo"/>
        <input type="button" onClick="init()" value="submit"/>
    </body>
</html>

Answer 1

您需要加载jquery.min.js 之前 jquery-ui.min.js，并且* 不嵌套脚本 * s，因此您的<head>标记应该是：

    <head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>

    <script>
    function init() {
    /*...SOME STUFF HERE*/
    } 
    </script>  
    </head>

Answer 2

而不是document.write，您可以添加这样的标记。

 <html>
<head>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>   
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>   
<link rel="stylesheet" href="http://jqueryui.com/jquery-wp-    content/themes/jquery/css/base.css?v=1">

<script>
function init()
{
var op=document.getElementById("inputo").value;

var string = "<h1 class='test' style='color:red; height:50px; width:50px; border:1px solid black ; border-radius:100%; line-height: 50px;'>" + op + "</h1>";
$("#container").html(string);
$(".test").draggable();
}
</script>
</head>
<body>
Draggable: <input type="text" id="inputo"/>
<input type="button" onClick="init()" value="submit"/>

<div id="container"></div>

</body>
</html>

使用文档写入编写jquery

2 个答案: