mercredi 22 avril 2020

Is there a way to append a large div string easier in jQuery?

This is my code. For now it's medium sized , but If i were to come up with other ideas...It would expand too much.

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>`);
        });

How can I refactor this so that it does not seem so hardcoded ?




Aucun commentaire:

Enregistrer un commentaire