有没有一种方法可以在jQuery中轻松附加大div字符串?

时间:2020-04-22 08:42:13

标签: javascript html jquery web ecmascript-6

这是我的代码。现在它是中等大小,但是如果我要提出其他想法...它会扩展太多。

query.forEach(place => {
            $('#placesFiltered')
                .append(`<div class="col-sm-6 col-lg-12 col-xl-6 featured-responsive">
                            <div class="featured-place-wrap">
                                <a asp-action="ById" asp-route-id="place.Id">
                                    <img src="${place.mainImage}" class="img-fluid" alt="#" style="height:300px;width:auto;object-fit:fill">
                                    <span class="featured-rating-orange ">${place.rating}</span>
                                    <div class="featured-title-box">
                                        <h6>${place.name}</h6>
                                        <p>${place.category}</p> <span>• </span>
                                        <p>${place.reviewCount} Reviews</p> <span> • </span>

                                        <p>${dollarString.repeat(place.priceRange)}<span>${dollarString.repeat(3-place.priceRange)}</span></p>

                                        <ul>
                                            <li>
                                                <span class="icon-location-pin"></span>
                                                <p style="font-weight:bold">${place.city}</p>
                                            </li>
                                            <li>
                                                <span class="icon-location-pin"></span>
                                                <p>${place.address}</p>
                                            </li>
                                            <li>
                                                <span class="icon-screen-smartphone"></span>
                                                <p>+${place.telephoneNumber}</p>
                                            </li>
                                        </ul>
                                    </div>
                                </a>
                            </div>
                        </div>`);
        });

我该如何重构它,使其看起来没有那么硬编码?

0 个答案:

没有答案