如何使用var变量值在html中显示div

Question

我已经在就绪函数中定义了变量（城市）。

$(document).ready(function () {
  var city = getQueryStringValue("region")
  console.log("city::",city);
}

现在，我想在html div中获取city的值并应用条件以显示div。我正在使用ejs文件。我正在控制台中获得城市的价值。

<% if(city!=undefined && city!=''){ %>
<p>
    <b>
    <span id="city"></span>, 
    <span id="country"></span>
    </b>
</p>
<p class="jp-font-12">
    <span class="jp-m-r-10"> 
        <span id="checkin" style="display: none;"></span> 
        <span id="checkout" style="display: none;"> </span> 
        <span id="checkinFrm"></span> - <span id="checkoutTo"> </span> 
    </span>
    <span id="roompickers"></span>
</p>
<% } else { %>
<p></p>
<% } %>

我的意图是仅在城市值未定义或为空时显示html内容。如何实现呢？

Answer 1

实际上您只可以在呈现DOM之前将变量从服务器端节点上的控制器传递到视图中，因此，据我所知，如果您打算在呈现期间传递变量，则不能做这个。 最佳方法是在JS中创建整个元素，然后将其附加到HTML。

所以我们说我们有一个类似HTML的元素：

<div id="dom"></div>

然后，我们想在city存在时将元素附加到元素上。

$(document).ready(function() {
  var city = getQueryStringValue("region");
  if (city != undefined && city != "") { // It's better to replace your condition with if(city)
    var element = `<p><b><span id="city"></span>, <span id="country"></span></b></p><p class="jp-font-12"><span class="jp-m-r-10"><span id="checkin" style="display: none;"></span> <span id="checkout" style="display: none;"> </span><span id="checkinFrm"></span> - <span id="checkoutTo"></span></span><span id="roompickers"></span></p>`;
    $("#dom").append(element);
  }
});