使用html中的javascript变量隐藏/显示html标签

Question

我正在尝试根据cookie值显示/隐藏html标签。 我可以通过将ID分配给该锚标记并在javascript中将其显示设置为不显示来执行此操作，但是我只希望在html中对此显示。

示例代码：

从cookie获取公司名称。

$(document).ready(function () {
   var companyName = getCookie("GlobalCompanyName"));
});

想要做这样的事情。

<div class="coach_title_row">
  <% if (companyName == "XYZ" )
  { %>
     <a class="new" href="<%= this.ResolveUrl("~/")%>Reports/Tool/Step1.aspx" title="Create New Report"><img src="<%= this.ResolveUrl("~/")%>Static/V3/Images/ReportingTool/new_report.png"/></a>
<% } %>
</div>

我知道如何使用jQuery来做到这一点，但我只是不想使用它。 我在问是否可以在html内使用jQuery变量进行比较（在if / else语句中）。

Answer 1

起初，我想知道为什么不只使用常规的javascript / jquery？ 但是，在查看您提供给我们的代码后，我认为您可能需要一种解决方法。 解决方案似乎很简单，所以我想我可能不太了解您的问题，也许您正在使用的堆栈的更多详细信息会有所帮助？

这是使用简单jQuery实现此目的的方法。 但是，根据您的设置，这很可能行不通，以下说明。

var companyName;
var myHtml = "<a href="#">Whatever you need here</a>;

jQuery(document).ready(function () {
   companyName = getCookie("GlobalCompanyName"));
   if(companyName == 'xyz'){
     jQuery('.coach_title_row).append(myHtml);
   }
});

话虽如此，看来您正在使用模板表示法中的ASP。 为什么不仅仅在您的控制器中获取cookie值并将其传递到视图中？ 这比在这种情况下尝试使用javascript要干净得多。

另外，如果您使用javascript插入包含模板属性的html，则可能会出现延迟加载问题。 将加载html，但不会渲染任何后端内容，因为javascript在客户端上运行时正在插入此内容。

解决方法是将链接插入到您的视图中，然后在Cookie正确的情况下使用javascript在页面加载时“显示” div。

的HTML：

div class="coach_title_row">

     <a class="new" **style="display"none"**; href="<%= this.ResolveUrl("~/")%>Reports/Tool/Step1.aspx" title="Create New Report">

  <img src="<%=   this.ResolveUrl("~/")%>Static/V3/Images/ReportingTool/new_report.png"/>

    </a>

</div>

脚本：

var companyName;

jQuery(document).ready(function () {
   companyName = getCookie("GlobalCompanyName"));
   // Instead just show the link already loaded, given cookie is correct
   if(companyName == 'xyz'){
     jQuery('.new').css('display','block');
   }
});