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 つの文字列を一緒に追加する+か、改行を\n

各改行が \n に置き換えられるように、php 配列を操作します。

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