2

HTML のデータ属性に適用した一部の JSON データで奇妙な動作が発生しています。修正を使用して動作していますが、この修正を適用する必要がある理由がわかりません。jquery-1.9.0 を使用しています

ケース 1 - なしで作業する$.parseJSON()

http://reelfilmlocations.co.uk/browse-locations/

このページでは、画像の下のアイコンにデータ属性が適用されています。例としてマップ アイコンを使用します。地図アイコン

html は次のようになります。

    <img
       src="/images/Icons/map circle.fw.png" width="24" height="24" 
       class="icon mapLink"
       data-location='{
           "id":"<?php echo($row_rs_locations['id_loc']);?>",
            "slug":"<?php echo($row_rs_locations['slug_loc']);?>",
            "page":"<?php echo($cur_page);?>",
            "lat":"<?php echo($row_rs_locations['maplat_loc']);?>",
            "lng":"<?php echo($row_rs_locations['maplong_loc']);?>",
            "pinType":"loc",
            "name":"<?php echo($row_rs_locations['name_loc']);?>",
            "linkType":"list"
      }'
    />

JSON オブジェクト:

{ "id":"5", "slug":"boston-manor-house-and-park", "page":"1", "lat":"51.492341", "lng":"-0.3186064000000215", "pinType":"loc", "name":"Boston Manor House and Park", "linkType":"list" }

私はhttp://jsonlint.com/でチェックしましたが、これは実際に有効なjsonです

マップアイコンがクリックされたときに実行する次のjqueryがあります

$('.wrapper').delegate('.mapLink','click',function() {
            var myData = $(this).data('location');
            console.log(myData); // correctly logs json object
            $('.middle_section').hide();
            $('#mapContent').show();
            createMarkerWithInfo(myData, true); 
        })

すべてが期待どおりに機能します data-location 要素は json として読み込まれ、他に何もせずに json オブジェクトとして使用できます

ケース 2 - 使用する必要がある$.parseJSON()

http://2012.reelfilmlocations.co.uk/browse-locations/

これは上記のケースとほぼ同じです (このバージョンはモバイル デバイス用に最適化されます)。

コードはほとんど同じですが、クリック イベントが data-location 要素を取得しますが、テキストは json オブジェクトではないため、使用$.parseJSON(myData)する前に解析する必要があります。

$('.wrapper').delegate('.mapLink','click',function() {
            //console.log('mapLink clicked');
            var myData = $(this).data('location');
            console.log(myData);// outputs text not a json object
            myData = $.parseJSON(myData) //parse the data
            console.log(myData);// outputs a JSON object
            $('.middle_section').hide();
            $('#mapContent').show();
            createMarkerWithInfo(myData, true); 
        })

まったく同じである 2 つのスクリプトで、なぜ $.parseJSON を使用する必要があるのか​​ 理解できません。

4

2 に答える 2

2

それが機能している最初のリンクは、jQuery 1.9.0 を使用しています。

機能していない 2 番目のリンクは、jQuery 1.7.2 を使用しています。

それが機能しない理由は、jQuery 1.7.2 (そのサイトで使用しているバージョン) で使用される正規表現が/^(?:\{.*\}|\[.*\])$/、属性に正しい JSON が含まれていることを検出できず、それを渡さないためです。に$.parseJSON。

jQuery 1.10.2 で使用される正規表現である は/(?:\{[\s\S]*\}|\[[\s\S]*\])$/、 JSONがあることを正しく検出し、それを に渡します$.parseJSON。(この式はかなり寛容に思えますが、無効なものを渡して解析が失敗した場合は、文字列を続行します。) おそらく、1.7.2 と 1.9 の間のどこかで正規表現を修正しました。

mapLinkjQuery 1.7.2 を使用して、ページの最初から JSON を使用したテスト ページを次に示します。

<div id="test" data-location='{
                              "id":"1",
                              "slug":"watermans-arts-centre",
                              "page":"1",
                              "lat":"51.485768",
                              "lng":"-0.29806459999997514",
                              "pinType":"loc",
                              "name":"Watermans Arts Centre",
                              "linkType":"list"
                              }'></div>
<script>
  (function() {
    var test = $("#test");
    display("jQuery v" + test.jquery);
    display("typeof data: " + typeof test.data("location"));

    function display(msg) {
      $("<p>").html(String(msg)).appendTo(document.body);
    }
  })();
</script>

...出力：

jQuery v1.7.2

データ型: 文字列

...そして、jQuery 1.10.2 を使用した同じページを次に示します。出力は次のとおりです。

jQuery v1.10.2

データのタイプ: オブジェクト
于 2013-08-14T13:12:10.470 に答える
1

jQueryのドキュメントから：

データ属性がオブジェクト (「{」で始まる) または配列 (「[」で始まる) の場合、jQuery.parseJSON を使用して文字列が解析されます。引用符で囲まれたプロパティ名を含む有効な JSON 構文に従う必要があります。値が JavaScript 値として解析できない場合は、文字列として残されます。

http://api.jquery.com/data/#data2

したがって、2 番目の JSON データは無効である可能性が非常に高いようです。

于 2013-08-14T12:53:54.873 に答える