Question

对于我读过的每一行文字，我想做这样的事情： <div style id="overlayr3"> some-name </div>

这样我的示例就像这一个（http://jsfiddle.net/jsnga/），其中叠加层与ID号相关联。

以下是我到目前为止的相关内容：非常感谢任何帮助！

var xhr = new XMLHttpRequest();
xhr.open("GET", "coords1.txt", true); 
xhr.onload = function(e) {
if(this.status == 200) {
    // get text contents

var coords = xhr.responseText.split("\n");
    coords = coords.filter(Boolean) //prevents extra rect with 0 coords
    coords.forEach(function(coord) {
            // create new area element 
            var area = document.createElement("area");
            area.id = "r3";

             //create overlay with first term in string
            var div = document.createElement("div");
            div.id ="overlayr3"; 

            // get map element
            document.getElementById("demo").appendChild(area);
            document.getElementById("demo").appendChild(div);
        });
}
};

从这里，我做：

if($('#demo')) {
    $('#demo area').each(function() {
        var id = $(this).attr('id');
        $(this).mouseenter(function() {
            $('#overlay'+id).show();
        });

        $(this).mouseout(function() {
            var id = $(this).attr('id');
            $('#overlay'+id).hide();
        });

    });
}


xhr.send();

});

我在这里添加了一个有效的手册示例（无需从文本文件中读取）：

<map name="demo" id="demo">
<area shape="rect" coords="794,359,905,318" href="#" id="r1" alt="r1">

</map>

<div style id="overlayr1"> cscCSL1A15 </div>


<script type="text/javascript">
$(document).ready(function(){


if($('#demo')) {
    $('#demo area').each(function() {
        var id = $(this).attr('id');
        $(this).mouseenter(function() {
            $('#overlay'+id).show();
        });

        $(this).mouseout(function() {
            var id = $(this).attr('id');
            $('#overlay'+id).hide();
        });

    });
}
$('#overlayr1').hide();
});

</script>

Answer 1

i=0;
coords.forEach(function(coord) { 
 // create new area element
 var area =     document.createElement("area");
 area.id = "r"+i; 
 area.innerHtml=content;
 //increase i
 i++;

//create overlay with first term in string
 var div = document.createElement("div");
 div.id ="overlayr"+i; 
// get map element.    document.getElementById("demo").appendChild(area);     document.getElementById("demo").appendChild(div); });

html div叠加为初学者

1 个答案: