Javascript 添加新的 <area> 到 <map> 名称

Javascript add new <area> to <map> name

本文关键字：map 名称 添加 area Javascript      更新时间：2023-09-26

我有一些地图图像，我有一个数据库中map areas的描述，我把它拉出来并制作成一个数组。我正在尝试让 JavaScript 执行Foreach $('area')，并让它更新，让我们说var n，以便在每个area显示工具提示时，它会有不同的描述，具体取决于该areas编号。例如 

<area shape="rect" coords="29,78,65,114" href="#">

将有以下描述

<b>Taichi Pill Pack</b><br><br><span style='color:#ffcb4a'>This pack contains 100 Taichi Pills</span>

所以假设这是第一个area，下一个应该有以下描述

<b>Advanced Orb Bead Coupon</b><br><br><span style='color:#ffcb4a'>A valuable scroll that can be exchanged</span>

这是工具提示的JavaScript片段

<script type="text/javascript">
    var n = 0;
    $('area').each(function() {
        n++
    });
    $('area').qtip({
        content: {
            text: '<?php echo $desc[0]; ?>'
        },
        position: {
            my: 'top left',
            at: 'bottom right'
        },
        style: {
            classes: 'qtip-dark qtip-shadow qtip-rounded'
        }
    });
</script>

这将使所有area元素具有相同的描述。

感谢帮助。

更新

@Pudge601你的答案在 JavaScript 中给出了以下输出

<script type="text/javascript">
    var desc = $.parseJSON('["<span style='"color:#ffcb4a'">This pack contains 100 Taichi Pills, which will give<br>an amount of experience based on your current level.<br>Right-click to open.<br><br>Note: Only 10 of these items can be used per day.<br>Ascension LV1-149 characters can use up to 20'/day.<br>Ascension LV150+ characters can use up to 30'/day.<'/span>","Hey","You"]');
    $('area').each(function(n) {
        $(this).qtip({
            content: {
                text: desc[n]
            },
            position: {
                my: 'top left',
                at: 'bottom right'
            },
            style: {
                classes: 'qtip-dark qtip-shadow qtip-rounded'
            }
        });
    });
</script>

描述仍然没有出现。我还缺少什么吗？

首先，你需要通过 JSON 将 PHP 中的所有描述引入 JavaScript 代码中。然后，您需要循环访问每个区域，使用当前索引处的说明为每个区域创建工具提示。(请注意，JQuery 中的 .each 函数会为您执行索引，因此无需手动定义和递增n(。

<script type="text/javascript">
    var desc = $.parseJSON('<?php echo json_encode($desc); ?>');
    $('area').each(function(n) {
        $(this).qtip({
            content: {
                text: desc[n]
            },
            position: {
                my: 'top left',
                at: 'bottom right'
            },
            style: {
                classes: 'qtip-dark qtip-shadow qtip-rounded'
            }
        });
    });
</script>

<?php
$js_array = json_encode($desc);
echo "var desc = ". $js_array . ";'n";
?>
$('area').each(function(index, element){
    $(element).tooltip({title: desc[index]});
})

在 jQuery each 中使用 index 和 element 。还可以使用一些方法使数组php js

相关文章：