gpt4 book ai didi

javascript - 在 Stimulus Controller 中使用 querySelector 检索动态元素时出现问题

转载 作者:行者123 更新时间:2023-11-28 03:37:14 27 4
gpt4 key购买 nike

当在我的 Controller 中查询元素时,我无法检索我想要的元素,即使当我在浏览器控制台中运行相同的代码时它完美地找到了它们(我可以看到 id 是 title1 在我的检查器中,例如)。从这个意义上说,我想知道我是否缺少一些关于如何在非静态时检索特定元素的 Stimulus 信息,或者为什么 Stimulus 不像 querySelectors。

代码如下:

a) 在 app/views/legislations/show.html.erb 中:

<div data-controller="slideshow">
<% titles.each do |title| %>
<div id="title<%= title.number %>" data-target="slide">
<h3>Title <%= title.number %>
</div>
<% end %>
</div>

b) 在 app/javascript/controllers/slideshow_controller.js 中:

import { Controller } from "stimulus"

export default class extends Controller {
static targets = [ "slide" ];

showFinished(){
var firstSection = document.getElementById("title1")
}
}

感谢任何指导/帮助!

最佳答案

您能否提供一些有关 showFinished 的背景信息?行动于 slideshow Controller 被称为?我不认为 Stimulus 有任何反对 querySelector 的地方,因为它们似乎 make use of them在引擎盖下!

<小时/>

我不确定这与您遇到的问题有什么关系,但我想指出一些与 Stimulus 中使用的命名约定相关的内容,以防它导致其他奇怪的副作用。在 documentation for Targets ,它们表明 data-target 的命名约定是 controller-identifier.target-name :

<div data-controller="search">
<input type="text" data-target="search.query">
<div data-target="search.errorMessage"></div>
<div data-target="search.results"></div>
</div>

在此示例中,searchcontroller-identifierquery , errorMessage ,和results有 3 种不同 target-name s。要使用此约定,您应该具有如下内容:

<div data-controller="slideshow">
<% titles.each do |title| %>
<div id="title<%= title.number %>" data-target="slideshow.slide">
<h3>Title <%= title.number %></h3>
</div>
<% end %>
</div>

注意:我还添加了缺失的 </h3>我也不认为与您遇到的问题有任何关系。

关于javascript - 在 Stimulus Controller 中使用 querySelector 检索动态元素时出现问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57596383/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com