Question

我有一个使用引导程序和JQuery的应用程序。在网站页面上，它显示一些链接。根据我在JavaScript文件中设置的特定条件，我想删除这些链接。在我的HTML页面Landing.html上，我的链接的代码如下：

<div class = "container">
<div class="row row-eq-height" style="border: none; height: 70px; padding:10px;"></div>
<h1>Surveys</h1>
<li><a target="_blank" href.bind="PreTestLink">PreTest Survey 1</a></li>
<li><a target="_blank" href.bind="PreTestLink2">PreTest Survey 2</a></li>
</div>

在我的JavaScript文件Landing.js中，我有一个带有此字段的构造函数方法，我希望以此为条件来设置上述链接是否为删除线：

 import {RouterConfiguration, Router} from 'aurelia-router';
 var myApp;
 export class Landing {

 static inject() { return [Router]; }

 constructor(router){
    this.router = router;
    myApp = this;
    this.config = {}
    this.surveyCode1 = "";
    this.surveyCode2 = "";
    this.surveyCompleted = false;
 }
...
 if(some condition){
    this.surveyCompleted = true;
 }

现在，我知道使用JQuery，我可以通过插入以下内容来将html文件中的值（即用户可能在文本框中输入内容）发送到JavaScript文件中

 value.bind="username"

放入HTML标记。我也知道HTML中的删除线可以通过以下方式完成：

<del> tag

我只是不确定如何反向连接此逻辑，以便使用我的SurveyCompleted条件变量在HTML页面中设置标签。

Answer 1

您似乎使用Aurelia进行编码。所以我建议您使用aurelia而不是Jquery。因此，这很容易，因为Aurelia支持条件模板。 Official Docs。所以你可以做这样的事情。

 <div class="container">
  <div class="row row-eq-height" style="border: none; height: 70px; padding:10px;"></div>
  <h1>Surveys</h1>
  <li>
    <a target="_blank" if.bind="!surveyCompleted" href.bind="PreTestLink">PreTest Survey 1</a>
    <a if.bind="surveyCompleted" target="_blank" href.bind="PreTestLink"><del>PreTest Survey 1</del></a>
  </li>
  <li>
    <a target="_blank" if.bind="!surveyCompleted" href.bind="PreTestLink">PreTest Survey 2</a>
    <a if.bind="surveyCompleted" target="_blank" href.bind="PreTestLink"><del>PreTest Survey 2</del></a>
  </li>

我不认识aurelia，但我认为这一定可以帮到您。让我知道您是否仍然遇到问题。

希望这会有所帮助：）

如何在JQuery中有条件地使用HTML标记

1 个答案: