如何在 JavaScript 的嵌入式 HTML 中创建 if 语句以显示 CSS 类

Question

How to display one of two classes based on if there is data in the js array.

eg if there is responseData.title show class grey else class white

I am trying this now:

let resultHTML = '<article class="item">\
                    <div class="post-main">\
                        <header class="clear">\
                            <a href="' + responseData.url + '"</a>\
                            <span class="post-date">just now</span>\
                        </header>\
                        'if (responseData.title) {
                            '<section class="grey">'
                        } else {
                            '<section class="white">'
                        }'\
                            ' + articleImage + '\
                            <h3>' + responseData.title + '</h3>\
                            <div class="post-about">' + responseData.about + '</div>\
                        </section>\
                    </div>\
                </article>';

Answer 1

You can use the ternary operator . In your case, it would be like this:

let resultHTML = '<article class="item">\
                    <div class="post-main">\
                        <header class="clear">\
                            <a href="' + responseData.url + '"</a>\
                            <span class="post-date">just now</span>\
                        </header>\
                        ' + responseData.title ?
                            '<section class="grey">'
                        :
                            '<section class="white">'
                        + '\
                            ' + articleImage + '\
                            <h3>' + responseData.title + '</h3>\
                            <div class="post-about">' + responseData.about + '</div>\
                        </section>\
                    </div>\
                </article>';

Answer 2

I will prefer using Template literals (Template strings) with Conditional (ternary) operator which is more cleaner.

Demo:

 let responseData = {title:'abc'} let articleImage = 'test'; let resultHTML = `<article class="item"> <div class="post-main"> <header class="clear"> <a href=responseData.url </a> <span class="post-date">just now</span> </header> ${ responseData.title ? '<section class="grey">' : '<section class="white">' } ${articleImage} <h3> ${responseData.title} </h3> <div class="post-about"> ${responseData.about} </div> </section> </div> </article>`; console.log(resultHTML);