1

我们正在建立一个网站，为此我们需要包含一个国家/地区的图像地图，当您突出显示普罗旺斯时，它需要在地图下方显示一些内容。

为此，我们正在使用 jquery mapster（我不是一个真正的 jquery 程序员，所以也许你可以帮忙）。

一切都适用于下面的代码，但仅当内容位于 1 行时。

例如groningen: "<h1>Groningen</h1><p>test</test>",<-- 这行得通

例如

groningen: "<h1>Groningen</h1>
<p>test</test>",

这不起作用。

下面你会找到我的jQuery代码

<script type="text/javascript">
var $s = jQuery.noConflict(); 
$s(document).ready(function () {
       var image = $s('img');
       var data = {
            groningen: "<h1>Groningen</h1>
<p>test</test>",
            friesland: "<?php echo $extrafields[10];?>",
       };
       var defaultDipTooltip = 'I know you want the dip. But it\'s loaded with saturated fat, just skip it and enjoy as many delicious, crisp vegetables as you can eat.';

       image.mapster(
       {
            fillOpacity: 1,
            fillColor: "ff2d52",
            strokeColor: "ff2d52",
            strokeOpacity: 0.8,
            strokeWidth: 1,
            stroke: true,
            isSelectable: true,
            singleSelect: true,
            mapKey: 'name',
            listKey: 'name',
            onClick: function (e) {
                var newToolTip = defaultDipTooltip;
                $s('#selections').html(data[e.key]);
                if (e.key==='asparagus') {
                    newToolTip = "OK. I know I have come down on the dip before, but let's be real. Raw asparagus without any of that " +
                            "delicious ranch and onion dressing slathered all over it is not so good.";
                }
                image.mapster('set_options',{areas: [{
                    key: "dip",
                    toolTip: newToolTip
                    }]
                });
            },
            showToolTip: true,
            toolTipClose: ["tooltip-click", "area-click"],
            areas: [
                {
                    key: "groningen",
                    fillColor: "ff2d52",
                    toolTip: defaultDipTooltip
                },
                {
                    key: "friesland",
                    fillColor: "ff2d52"
                }
                ]
        });
      });
      </script>

输出

var data = {
    groningen: "<h1>Groningen</h1><p>test</test>",
    friesland: "<p>Scholen in de regio Groningen</p>
    \n<ul>
    \n<li>AOC Terra, Groene school<br />Adres<br />Winsum<br />Telefoonnummer<br />Naam directeur</li>
    \n<li>De Bolster<br />Adres<br />Groningen<br />Telefoonnummer<br />Naam directeur</li>
    \n<li>De Catamaran, School voor Praktijkonderwijs<br />Adres<br />Stadskanaal<br />telefoonnummer<br />Naam directeur</li>
    \n<li>Dollard College locatie De Flint</li>
    \n</ul>",
    };
4

1 回答 1

0

Javascript 和扩展 jQuery 字符串不能越过行边界，您需要将 2 个字符串与 a 一起添加+或替换换行符\n

对您的 php 数组进行一些操作，以便将每个换行符替换为 \n

$UpdatedString = str_replace("\n", '\\n', $FieldValue);
于 2012-12-05T22:53:07.237 回答