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

Question

我已经在ready函数中定义了变量（city）。

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

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

<% 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>
<% } %>

我的意图是仅当 city 值不是 undefined 或空白时才显示 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);
  }
});

Answer 2

所以你要做的是显示一些 html 如果城市变量存在。你不能在你的预渲染 DOM 上使用客户端 JS，所以如果你想在你的客户端使用 EJS，你需要将这个脚本标签添加到你的 html head 标签中：

<script src="ejs.js"></script>

然后用ejs对象解析一些html，就像这样：

let ejscode = 'your-ejs-code';
let completeCode = ejs.render(ejscode, {city: city});
$('#container').append(completeCode);

如果城市已定义且不为空，则会显示代码。

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

How to use var variable value to show div in html

html

javascript

frontend

ejs