使用 JQuery 解析数据

Question

我有一个容器，其中一个选项卡上有 Google 地图 API，另一个选项卡上有图像。从列表中选择位置时，我想在另一个选项卡中更改图像。

我有一个隐藏的输入字段，其中存储带有 ID 和图像的位置列表。单击列表项时，会出现一个具有 ID 的 div。

看起来像这样：

<input id="storeLocatorData" name="storeLocatorData" type="hidden" value="[{"id":2,"name":"name","lat":51.111113,"lng":-1.3111121,"category":"test","address":"Company 1","address2":"Test Road","address3":"","city":"Bristol","postal":"B90 5BD","country":"UK","phone":"","email":{},"image":"1181","LocationPhoto":"http://url/media/2728/logo.png"},{"id":3,"name":"name","lat":51.1113243,"lng":-1.331121,"category":"test","address":"Company 1","address2":"Test Road","address3":"","city":"Bristol","postal":"B90 5BD","country":"UK","phone":"","email":{},"image":"1181","LocationPhoto":"http://url/media/2728/header.png"}]/>

我想找到 div (ID) 的文本，然后从列表中找到关联的图像，然后将图像的 src 设置为新选择的图像。

我将如何解析列表并根据#loc-id 文本获取图像中的url，然后设置#location-image？

这是我目前所拥有的：

$('#list').click(function () {
    //Change the src of img
    $(this).find('#loc-id').text();
    $('#location-image').attr('src', newVal);
});

这是完整的 HTML：

                        <div id="map-container">
                            <div class="tabs mobile-hide">
                                <ul class="tab-links">
                                    <li class="active"><a class="tab-link-text" href="#tab1">Location Map</a></li>
                                    <li><a class="tab-link-text" href="#tab2">Location Photo</a></li>
                                </ul>

                                <div class="tab-content">
                                    <div id="tab1" class="tab active">
                                        <div id="panel-map">
                                            <div id="map"></div>
                                        </div>
                                    </div>

                                    <div id="tab2" class="tab">

                                        <img id="location-image" class="location-photo" src=""/> 
                                    </div>
                                </div>
                            </div>
                        </div>

                        var jsonMarkers = new List<object>
                                ();

                        foreach (dynamic l in this.Locations)
                        {
                            var media = Model.MediaById(l.image);
                            jsonMarkers.Add(new
                            {
                                id = l.LocationId,
                                name = l.address1,
                                lat = l.latitude,
                                lng = l.longitude,
                                address = l.address1,
                                address2 = l.address2,
                                address3 = l.address3,
                                city = l.city,
                                postal = l.postcode,
                                country = "UK",
                                phone = l.telephoneNumber,
                                email = l.bookingAfterEmail,
                                image = l.image,
                                LocationPhoto = url + media.NiceUrl
                            });


                        }
                        @Html.Hidden("storeLocatorData", Json.Encode(jsonMarkers));

谢谢！

Answer 1

您可以使用 JSON 解析数组，如下所示：

// Store a parsed array
var parsedArray = JSON.parse(document.getElementById('storeLocatorData').value);

// When we select the item
$('#list').click(function () {
    //Change the src of img
    var targetID = $(this).find('#loc-id').text();  // Get the ID

    // Since your array of objects isn't indexed, we need to loop to find the correct one
    var foundObject = null;
    for (var key in parsedArray) {
        if (parsedArray.hasOwnProperty(key) && parsedArray[key].id == targetID) {
            foundObject = parsedArray[key];
            break;
        }
    }

    // If we found the object, extract the image and set!
    if (!foundObject)
        return;

    var imageSrc = foundObject.LocationPhoto; // From the object
    $('#location-image').attr('src', imageSrc); // Set the new source
});