在Hugo循环中,如何在第一个项目之后更改HTML类?

huangapple go评论98阅读模式
英文:

Changing a html class after the first item in a Hugo loop

问题

所以我正在使用Bootstrap和Hugo制作一个评论轮播图,我有一段代码,可以分解成这样:

{{ range seq 1 3 (len site.Data.reviews) }}
  ...
  {{ range seq . (add . 2) }}
    {{ with (index site.Data.reviews (string .)) }}
      {{ .des }}
    {{ end }}
  {{ end }}
  ...
{{ end }}

所以有两个循环,一个用于创建轮播图的幻灯片,另一个用于填充幻灯片的数据文件。问题是,我需要删除活动类并调整下几个幻灯片上的data-bs-interval输入。我考虑过使用if语句,但不确定如何替换第一个div,以便在生成的内容中不再具有活动类。

英文:

So I am making a review carousel using Bootstrap and Hugo, I've got code that breaks down into this:

{{ range seq 1 3 (len site.Data.reviews) }}
  ...
  {{ range seq . (add . 2) }}
    {{ with (index site.Data.reviews (string .)) }}
      {{ .des }}
    {{ end }}
  {{ end }}
  ...
{{ end }}

So there's two loops, one to make the slides for the carousel, and the other to fill the slides with data files. The issue is I need to delete the active class and adjust the data-bs-interval input on the next few slides I thought about making an if statement but I'm not sure how to replace the first div with one that doesn't have the active class after that in whats generated.

答案1

得分: 1

我不知道这是否是最好的解决方案,但是我没有修改循环,而是写了一段JavaScript代码:

var addActive = document.getElementById('carouselExampleDark').getElementsByClassName('carousel-item')[0];
addActive.classList.add("active");

这对我的用例有效,所以我就这样留下了。

英文:

I don't know if this is the best solution to it, instead of editing the loop I wrote a bit of javascript:

var addActive = document.getElementById('carouselExampleDark').getElementsByClassName('carousel-item')[0];
    addActive.classList.add("active");

That works for my use case so I'll leave it at that.

huangapple
  • 本文由 发表于 2022年6月30日 23:37:23
  • 转载请务必保留本文链接:https://go.coder-hub.com/72818516.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定