Question

在控制器中查询元素时，我无法检索所需的元素，即使在浏览器控制台中运行相同的代码时，它也能完美地找到它们（我可以看到id为title1我的检查员，例如）。从这个意义上讲，我想知道是否缺少一些刺激信息，例如当元素不是静态时如何检索特定元素，或者为什么刺激不喜欢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")
   }
}

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

Answer 1

您能否提供有关调用GetChildTypeOf(...)控制器中的showFinished动作时的背景信息？我认为Stimulus对querySelector没有任何作用，因为它们似乎在make use of them的幕后！

我不确定这与您遇到的问题有关，但我想指出一些与Stimulus中使用的命名约定有关的内容，以防引起其他怪异的副作用。在documentation for Targets中，他们显示slideshow的命名约定为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-identifier，query和errorMessage是3个不同的results。要使用此约定，您应该具有以下内容：

target-name

注意：我还添加了一个丢失的<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>标签，我也认为该标签与您遇到的问题无关。

在Stimulus控制器中使用querySelectors发出动态元素检索

1 个答案: