时间戳

首页 > 解决方案 > 在 Stimulus 控制器中使用 querySelectors 检索动态元素的问题

javascript - 在 Stimulus 控制器中使用 querySelectors 检索动态元素的问题

问题描述

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

代码如下：

一）在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")
   }
}

任何指导/帮助表示赞赏！

标签： javascripthtmlruby-on-railsruby-on-rails-5stimulusjs

解决方案

您能否提供一些有关何时调用控制器中的showFinished操作的上下文？slideshow我不认为 Stimulus 对 querySelectors 有任何反对，因为它们似乎在后台使用它们！

我不确定这与您遇到的问题有什么关系，但我想指出一些与 Stimulus 中使用的命名约定相关的内容，以防它引起其他奇怪的副作用。在Targets 的文档中，他们表明 a 的命名约定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>

在这个例子中，search是controller-identifierand query, errorMessage, andresults是 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>标签，我也不认为它与您遇到的问题有任何关系。

推荐阅读