Question

我的想法是为多个地理位置设计监控系统。令人讨厌的是用户问题，帐户与网络问题等分开。工程师正在处理网络，但对位置几乎没有洞察力。所以我想对此进行直观的了解......我无法轻松地操纵平面图或校园地图来验证数据。的瞧！

不能说我对stackoverflow的帮助印象深刻...我多次重复我的问题但保留了它并最终找到了我自己的方式...希望这有助于某人，请评论是否有任何改进。接下来的事情是提前填写表格的帖子，如果我们说我们有一个7层楼的房间，从100到150; 200到250等该阵列将自动形成盒子，所以我只需要操纵尺寸和尺寸。定制会很好。之后更新'标签'。但我想继续前进:)

    function addFormField(post) {
            var x=0;
            while(x<post){

            var id = document.getElementById("id").value;
        //  $("#divTxt").append("<p id='row" + id + "'><label for='txt" + id + "'>Field " + id + "&nbsp;&nbsp;<input type='text' size='20' name='txt[]' id='txt" + id + "'>&nbsp;&nbsp<a href='#' onClick='removeFormField(\"#row" + id
    + "\"); return false;'>Remove</a><p>");
            $("#divTxt").append("<p class='box' id='row" + id + "'>" + id
    + "<p>");       
            $('#row' + id).highlightFade({
                speed:500
            });

              $("#map").droppable({
              drop: function() { 
                ///

        //        $("#final :span").each(

            $("#final").append("<br/><span style='padding-left:10px'><input name='final"+id+"' id='final"+id +"' type='text' size='19'></span><span style='padding-left:22px'>"+    $("#x-coordinate").text()+"</span><span style='padding-left:15px'>"+    $("#y-coordinate").text()+"</span><span style='padding-left:15px'>"+ width
    +"</span><span style='padding-left:35px'>" + height+"</span>");


                /////
                }
            });

             $("#row"+ id).resizable(

             );
             $("#row"+ id).draggable({ 

        drag:function(){
             width = $(this).width();
             height = $(this).height();


             },
             containment: '#map', scroll: false 

             });

            id ++;
            document.getElementById("id").value = id;
            x++;

}
}

function removeFormField(id) {
    $(id).remove();
}

</script>

<body id="body">
<div id="contain" style="width: 802px; height:769px; border:2px solid #ccc; margin-left:100px"> 
 <img src="tip/ITHNY-campus.JPG" width="790px" height="760px" border="0" id="map">
</div>


<a href="#" onClick="addFormField(1); return false;">Add</a>
<form action="#" method="get" id="form1">
<input type="hidden" id="id" value="1">
<div id="divTxt"></div>
<p><input type="submit" value="Submit" name="submit">
<input type="reset" value="Reset" name="reset"></p>
</form>
<br/>
<table><tr>
<td>X:</td><td><pre id="x-coordinate" style="display:block"></pre></td></tr>
<tr><td>Y:</td><td><pre id="y-coordinate"></pre></td></tr></table>
<br/>
<div  id="final">
<table border="1">
<tr>
<th width="144">Name</th>
<th width="36">X</th>
<th width="36">Y</td>
<th width="36">W</th>
<th width="70">H</th>
</tr>
</table>

</div>

Answer 1

我不知道这是否有助于解决您的问题，但无论如何： jQuery是基于选择器的，因此使用类而不是ID（删除各处的#s并将相应的id / name属性更改为类属性），您的代码将更加通用，因此更具可重用性和可维护性。

Jquery图像映射

1 个答案: