Question

我有以下miniapp：

[！[在此处输入图像说明] [1]] [1]

单击左侧列表中的元素时，信息应在右侧div上相对于该单击元素动态更改。

我可以让它静态工作，但我不知道如何让它变得动态。

我有一个包含数据的JSON文件，数据正确加载并正确解析。

data = '[{"name": "Hotel Sunny Palms","imgUrl": "images/sunny.jpg","rating": 5,"price": 108.00},{"name": "Hotel Snowy Mountains","imgUrl": "images/snowy.jpg","rating": 4,"price": 120.00},{"name": "Hotel Windy Sails","imgUrl": "images/windy.jpg","rating": 3,"price": 110.00},{"name": "Hotel Middle of Nowhere","imgUrl": "images/nowhere.jpg","rating": 4,"price": 199.00}]';

我有以下HTML文件：

<section class="container clear">
            <div class="header">
                <img class="logo" src="images/lmn-logo-white.svg">
            </div>
            <div class="inner-container clear">
                <aside class="hotels-list">
                    <ul>
                        <li class="hotel">1</li>
                        <li class="hotel">2</li>
                        <li class="hotel">3</li>
                        <li class="hotel">4</li>
                    </ul>
                </aside>
                <article class="hotel-description">
                    <div class="hotel-description-container clear">
                        <div class="hotel-pic-container">
                            <img id="hotel-pic" src="images/sunny.jpg" height="130px">
                        </div>
                        <div class="hotel-info">
                            <h6 id="hotel-name" >Hotel Sunny Plans </h6>
                            <div id="hotel-rating" class="hotel-rating"></div>
                            <div id="hotel-price" class="hotel-price">
                                $180.00
                                <span>Total hotel stay</span>
                            </div>
                        </div>
                    </div>
                </article>
            </div>
    </section>

我的JS文件是这样的：我以静态的方式改变数据。基本上它的作用是找到所有的li项目，并在点击时更改右侧div的信息。

var hotelData = JSON.parse(data);

document.addEventListener('DOMContentLoaded', function() {
    var hotels = document.getElementsByClassName("hotel");
    for (var i = 0; i < hotels.length; i++) {
        hotels[i].addEventListener('click',function()
        {

         this.style.background = "#ccc";
         this.style.color = "#fff";

         var hotelName = document.getElementById("hotel-name");
         hotelName.innerHTML = hotelData[this].name;

         var hotelPrice = document.getElementById("hotel-price");
         hotelPrice.innerHTML =  "$" + hotelData[this].price + ".00" + "<span>Total hotel stay</span></div>";

         var hotelPic = document.getElementById("hotel-pic");
         hotelPic.src=hotelData[this].imgUrl;

         var hotelRating = document.getElementById("hotel-rating");
                if (hotelData[0].rating == 0) {
                    hotelRating.style.backgroundPosition = "0px 18px";
                }
                else if (hotelData[0].rating == 1) {
                    hotelRating.style.backgroundPosition = "0px 36px";
                }
                else if (hotelData[0].rating == 2) {
                    hotelRating.style.backgroundPosition = "0px 54px";
                }
                else if (hotelData[0].rating == 3) {
                    hotelRating.style.backgroundPosition = "0px 72px";
                }
                else if (hotelData[0].rating == 4) {
                    hotelRating.style.backgroundPosition = "0px 90px";
                }
                else if (hotelData[0].rating == 5) {
                    hotelRating.style.backgroundPosition = "0px 108px";
                }
        }); 
    };
});

有什么建议吗？感谢!!!

Answer 1

如果你对jQuery没问题，那么这是一个快速而简单的解决方案：

$(function () {
    var hotel_list = '';
    $.each(data, function(index, hotel) {
        hotel_list += '<li class="hotel" data-index="'+ index +'">'+ hotel.name +'</li>';
    });
    $("aside.hotels-list ul").html(hotel_list);

    $(document).on("click", "li.hotel", function () {
        var index = $(this).attr('data-index');
        load_hotel_info(index);
    });


    function load_hotel_info(index) {
        // Assuming the data variable is global...
        if(typeof data[index] !== undefined) {
            var hotel = data[index];
            $("#hotel-pic").attr('src', hotel.imgUrl);
            $("#hotel-name").html(hotel.name);
            $("#hotel-rating").html(hotel.rating);
            $("#hotel-price").html(hotel.price + '<span>Total hotel stay</span>');
        }
    }

    load_hotel_info(0); // When the page loads for the first time it should show the first item info on the right.

//如果要从ajax加载数据，则不需要这样做。 }）;

这样，旁边的酒店列表也会动态加载。并没有太多可以使它工作。只需在上面的代码之前通过脚本标记加载jquery。

我希望它有所帮助。

如何根据JSON数据动态更改属性？

1 个答案: