2

我需要做的是在添加区域标签时将它们动态写入地图，以便当我点击它们时它们会触发一个功能。

    <img src="out.jpg" usemap="#mapmap"/>
    <map name="mapmap">
        <area id="1" shape="rect" coords="75,300,125,400" onclick="writeDiv(this.id)"/>
        <area id="2" shape="rect" coords="175,300,225,400" onclick="writeDiv(this.id)"/>
        <area id="3" shape="rect" coords="275,300,325,400" onclick="writeDiv(this.id)"/>
    </map>

如果我知道区域将在哪里，那正是我所需要的。但是，我需要在用户添加更多内容时动态加载它们，并且我已经尝试过（在脚本标签中）：

    $("<img src=\"out.jpg\" usemap=\"#mapmap\"\/>").appendTo('body');
        $("<map name=\"mapmap\">").appendTo('body');
            $("<area id=\"1\" shape=\"rect\" coords=\"75,300,125,400\" onclick=\"writeDiv(this.id)\"\/>").appendTo('body');
            $("<area id=\"2\" shape=\"rect\" coords=\"175,300,225,400\" onclick=\"writeDiv(this.id)\"\/>").appendTo('body');
            $("<area id=\"3\" shape=\"rect\" coords=\"275,300,325,400\" onclick=\"writeDiv(this.id)\"\/>").appendTo('body');
        $("<\/map>").appendTo('body');

这很好，因为我仍然可以围绕图像格式化我的页面的其余部分，只是它不能按您期望的那样工作。我已经测试过了

    $("<div id=\"test\">testing text<\/div>").appendTo('body');

这可以将文本写入页面正文的底部。

那么，有没有办法让它工作，或者之间的依赖关系总是会搞砸？如果您可以完全想到另一种方法，我愿意接受建议。谢谢！

4

1 回答 1

0

当您使用 时$('<tag ...>')，jQuery 会解析 HTML 并从中创建 DOM 元素。您正在附加元素，而不是标签。像这样添加<map ...>会创建一个<map>元素并附加它，它（如果您在附加后转储生成的 HTML）将在文档中显示</map>标签和所有内容。

<area>元素必须进入元素，而<map>不是正文，以便它们工作（并且通常，文档保持有效的 HTML）。

var $map = $('<map name="mapmap">').appendTo('body');
$('<area id="1" shape="rect" coords="75,300,125,400" onclick="writeDiv(this.id)" />').appendTo($map);
$('<area id="2" shape="rect" coords="175,300,225,400" onclick="writeDiv(this.id)" />').appendTo($map);
$('<area id="3" shape="rect" coords="275,300,325,400" onclick="writeDiv(this.id)" />').appendTo($map);
// Note, no $('</map>') -- the $('<map...>') already took care of that
于 2013-05-27T18:31:47.687 回答