= =jade又来问关于Nodejs的问题了

= =jade又来问关于Nodejs的问题了

-for(var i = 0; i < lists.length; i++) { -if (active==lists[i]) { li.active -} else { li -} a(href= hrefs[i]) = lists[i] -} 输出的却是 <li>xxx</li><a href=‘xxx’>XXX</a> 缩进不起作用 怎么半

9 回复

好的，让我们来分析一下这个问题，并提供一个解决方案。

问题描述

Jade（现在称为Pug）模板引擎中，用户希望根据条件动态生成带有不同类名的列表项 <li>。但是，输出的结果却不符合预期， <li> 和 <a> 标签没有正确嵌套，且缩进没有生效。

示例代码

假设我们有以下数据结构：

const lists = ['Home', 'About', 'Contact'];
const hrefs = ['/home', '/about', '/contact'];
const active = 'About';

错误的Jade/Pug模板

以下是错误的Jade/Pug模板代码：

ul
  for var i = 0; i < lists.length; i++
    if active == lists[i]
      li.active
    else
      li
      a(href= hrefs[i])
        = lists[i]

正确的Jade/Pug模板

我们需要将 <a> 标签嵌套在 <li> 标签内部，这样才能正确生成HTML。以下是修正后的模板：

ul
  for list, i in lists
    li(class=active === list ? 'active' : '')
      a(href= hrefs[i]) #{list}

解释

  1. 循环遍历列表：使用 for list, i in lists 遍历列表中的每个元素及其索引。
  2. 条件判断：通过 class=active === list ? 'active' : '' 动态设置 <li> 的类名。
  3. 嵌套标签：将 <a> 标签嵌套在 <li> 标签内部，这样可以确保它们正确嵌套。
  4. 文本插值：使用 #{list} 将列表中的文本插入到 <a> 标签内。

输出结果

正确的HTML输出应该是：

<ul>
  <li><a href="/home">Home</a></li>
  <li class="active"><a href="/about">About</a></li>
  <li><a href="/contact">Contact</a></li>
</ul>

通过这种方式，我们可以确保 <li> 和 <a> 标签正确嵌套，并且可以根据条件动态设置类名。


…支持html标签 我去 /<li/>/<//li/>/<a href=“xxx” target="_blank"/>XXX/<//a/>

<div>代码要标记</div>

-for(var i = 0; i < lists.length; i++) { -if (active==lists[i]) { li.active a(href= hrefs[i]) #{lists[i]} -} else { li a(href= hrefs[i]) #{lists[i]} -}

-}

额 = =不懂

3Q 这个我知道 但是要是重复的很多不是会有很多无用代码么 没有办法精简么

= =这里也能写判断啊 略吊… 3Q

赞一个

从你的描述来看，你是在使用Jade模板引擎（现在称为Pug），并且遇到了一些格式和缩进上的问题。你在循环中尝试根据条件来改变li标签的类名，并且嵌套了一个a标签。但是当前的实现导致输出结果并不符合预期。

让我们通过一个简单的例子来修正这个问题。以下是正确的Pug模板代码示例：

ul
  each item, i in lists
    li(class=item === active ? 'active' : '')
      a(href= hrefs[i]) #{item}

解释：

  1. each item, i in lists: 这个语句表示遍历lists数组。item是当前迭代的元素，i是元素的索引。
  2. li(class=item === active ? ‘active’ : ‘’): 使用三元运算符来判断是否将active类添加到li标签上。如果当前item等于active变量，则添加active类。
  3. a(href= hrefs[i]) #{item}: 在li内部创建一个a标签，设置其href属性为hrefs数组中的相应值，并在a标签内部显示item的内容。

这样可以确保每个li标签根据item是否等于active进行条件渲染，并且每个li内部都有一个对应的a标签。

希望这能解决你的问题。如果你还有其他问题，请随时告诉我！

回到顶部