我如何简化if / else语句以在pug / jade中添加类？

Question

So I have an array of posts and I want to create a carousel with them. I'd like to know if i can simplify this code so it doesn't look so bad, and not repeat the same code just because i need to add a class to a div element.

for v, i in arr
    if i === 0
        .carousel-item.active
            img(src=v.banner.toString())
                .container
                    .carousel-caption.text-left
                        h1= v.name
                        p= v.description
                        p
                            a.btn.btn-lg.btn-primary(href=v.id, role='button') More!
    else
        .carousel-item
            img(src=v.banner.toString())
                .container
                    .carousel-caption.text-left
                        h1= v.name
                            p= v.description
                            p
                                a.btn.btn-lg.btn-primary(href=v.id, role='button') More!

Answer 1

To address this (very common) problem Pug allows you to pass either an array or an object to the class attribute. An object makes more sense in your case as you can easily map a class name ( active ) to a boolean indicating whether the class should be added ( i === 0 ).

.carousel-item(class={ active: i === 0 })

You can learn more useful tricks like this on the Attributes page of Pug's documentation .