Question

我想在输入文本字段给出的坐标中放入另一个div。增加的跨度应该与父母的坐标相对位置。问题是它不会添加任何东西，但它会改变画布的位置。

<html>
 <head> 
<style> 
    #rectangle { position: relative; }
</style>
<body>  
    300 x 300 px MAX<br/>
    <canvas id="rectangle" width="300" height="300"></canvas>
    <br/> 
    <table>
    <tr>
        <td>Horizontal starting cordinate:</td>
        <td><input type="text" id = "x" value = ""/></td>
    </tr>       
    <tr>
        <td>Vertical starting cordinate:</td>
        <td><input type="text" id = "y"/></td>
    </tr>
    <tr>
        <td>Width of the rectangle:</td>
        <td><input type="text" id = "width"/></td>
    </tr>
    <tr>
        <td>Height of the rectangle:</td>
        <td><input type="text" id = "height"/></td>
    </tr>
    <tr>
        <td></td>
        <td><input type="button" id = "draw" value = "Click"/></td>
    </tr> 
</table> 

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript"> 
jQuery(document).ready(function(){
     $("#draw").click(function(e){ 

        var x = e.pageX - this.offsetLeft;
        var y = e.pageY - this.offsetTop; 

        var x1 = parseInt($("#x").val());
        var y1 = parseInt($("#y").val());
        var width = parseInt($("#width").val());
        var height = parseInt($("#height").val()); 

        $("#rectangle")
            .add("div")
            .css("id", "right-zone") 
            .css("z-index", "5")
            .css("position", "absolute")
            .css("left", x1)  
            .css("top", y2)  
            .css("width", width)
            .css("height", height)
            .css("background-color", "#FF0000")
            .css("border", "solid red 1px");
   }); 
})  
</script>

任何想法有什么不对？

Answer 1

您应该使用.append()代替.add()。 .add()不会向DOM添加div，而是添加一组匹配元素的元素。

编辑：第二个想法，我看到你正在尝试将div附加到canvas元素。您可能有兴趣查看this，其中说明了：

canvas元素的内容（如果有）是元素的后备内容。

所以你应该用div替换你的canvas元素。那，或编辑您的问题以更好地反映这一细节。

Answer 2

你的代码中有一些“bug”，包括html和JS。

以下是一个工作示例：http://jsfiddle.net/kGd2G/1/

即。使用div代替canvas

<div id="rectangle" style="width: 300px; height: 300px;"></div>

为简化JS，我使用“模板div”为要添加的矩形设置一些默认值。

添加一个div，其坐标在另一个中给出

2 个答案: