当前位置： 文江博客话题详情

从刺激控制器中选择特定目标

发布于 2025-01-29 20:16:20 字数 879 浏览 3 评论 0原文

我正在寻找一种简单而优雅的方式（刺激路），以从目标元素中选择一个特定元素，形成了我的刺激控制器。

例如：我有一个4个链接和4个段落的列表（在控制器的范围内）。单击链接时，我希望与段落一起发生某些事情（例如添加类），该段落与链接具有相同的数据ID。这些段落被定义为刺激目标。

代码： https：//jsfiddle.net/nblvafxy/

请参阅此js-fiddle以获取 正在为我提供以下目标元素的访问：

  • event.currenttarget - ＆gt;给出单击元素（链接） - 可以在其中访问数据集，因此可以在其中访问数据集（event.currenttarget.dataset.linkid）
  • this.elementTarget - ＆gt;返回第一个元素目标（段落） - 但我无法选择一个特定的目标。
  • this.ElementTargets - ＆gt;返回一个目标元素（段落）的数组 - 但在这里，我不能过滤特定的目标。

对于最新的一个（this.ElementTargets），我希望，有一个JS方法可以以某种方式从此html元素中选择一个特定元素。

我想避免document.queryselector（...）作为带有数据ID的元素多次存在（请参阅JS-Fiddle中的第二个列表）。因此，刺激控制器“范围”中的解决方案将是最佳解决方案。

原文

I am looking for a simple and elegant way (a Stimulus-way) to select a specific element from the targets elements form my Stimulus controller.

For example: I have a list of 4 links and 4 paragraphs (both inside the scope of the controller). When clicking the link, I want something to happen (e.g. adding a class) with the paragraph, which has the same data-id as the link. The paragraphs have been defined as Stimulus-Targets.

Please see this JS-Fiddle for a code-example: https://jsfiddle.net/nbLvafxy/

Stimulus is giving me the following accesses to the target elements:

  • event.currentTarget -> gives the clicked element (the link) - where its possible to access the dataset and therefore the data-id of the clicked element (event.currentTarget.dataset.linkId)
  • this.elementTarget -> returns the first element target (paragraph) - but I cannot select a specific one.
  • this.elementTargets -> returns an array of target-elements (paragraphs) - but also here, I cannot filter for a specific one.

For the latest one (this.elementTargets), I would hope, there is a JS method to somehow select a specific element from this array of HTML elements.

I want to avoid document.querySelector(...) as the element with the data-id could be present on the page multiple times (see second list in the JS-Fiddle). Therefore, a solution within the "scope" of the Stimulus controller would be the best solution.

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（3）

一梦等七年七年为一梦 2025-02-05 20:16:20

这是我按名称选择目标的方法：

// I'm trying to get "stopTarget" element
const targetName = 'stop';

console.log(this[targetName + 'Target']);

甚至更容易：

console.log(this.targets.find(targetName));

Here is my approach to select target by name:

// I'm trying to get "stopTarget" element
const targetName = 'stop';

console.log(this[targetName + 'Target']);

Or even easier:

console.log(this.targets.find(targetName));
回复 原文
魔 2025-02-05 20:16:20

i虽然这会起作用，但是

我之前曾在同一页面上使用过多个控制器，但我会同意命名约定的评论者之一事情起来。目标都在两侧选择，添加类作品，但似乎可以重新加载或重新连接页面。

哦！！由于＃HREF，它正在重新连接！将您的＆lt;标签更改为按钮，然后删除HREF，然后效法。

抱歉，

索引的事情会起作用，但是元素和链接的顺序不相同。

因此，由于某种原因，您的HTML

<div class="flex bg-white">
  <div class="half" data-controller="effect" >
    <p><a href="#" data-action="effect#highlight" data-effect-target="link" data-link-id="1">Link 1</a></p>
    <p><a href="#" data-action="effect#highlight" data-effect-target="link" data-link-id="2">Link 2</a></p>
    <p><a href="#" data-action="effect#highlight" data-effect-target="link" data-link-id="3">Link 3</a></p>
    <p><a href="#" data-action="effect#highlight" data-effect-target="link" data-link-id="4">Link 4</a></p>
    <p data-effect-target="element" data-element-id="4">Element 4</p>
    <p data-effect-target="element" data-element-id="3">Element 3</p>
    <p data-effect-target="element" data-element-id="1">Element 1</p>
    <p data-effect-target="element" data-element-id="2">Element 2</p>
  </div>

  <div class="half" data-controller="effect">
    <p><a href="#" data-action="effect#highlight" data-effect-target="link" data-link-id="3">Link 3</a></p>
    <p><a href="#" data-action="effect#highlight" data-effect-target="link" data-link-id="4">Link 4</a></p>
    <p><a href="#" data-action="effect#highlight" data-effect-target="link" data-link-id="5">Link 5</a></p>
    <p><a href="#" data-action="effect#highlight" data-effect-target="link" data-link-id="6">Link 6</a></p>
    <p data-effect-target="element" data-element-id="4">Element 4</p>
    <p data-effect-target="element" data-element-id="5">Element 5</p>
    <p data-effect-target="element" data-element-id="6">Element 6</p>
    <p data-effect-target="element" data-element-id="3">Element 3</p>
  </div>
</div>

刺激控制器

import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  static targets = ["link", 'element']

  connect(){
  }

  highlight() {
    var lnk = event.target.dataset.linkId
    var elems = this.elementTargets
    for (var i = elems.length - 1; i >= 0; i--) {
      if (elems[i].dataset.elementId == lnk){
        elems[i].classList.add('text-blue-700')
        console.log(elems[i])
        break
      }
    }
  }

在HTML中添加到元素，但不更改？（在Safari中，但在Firefox中还可以）
无论如何，没有DOM ID，只有目标。

I though this would work, but it doesn't

I have used multiple controllers on the same page before and it worked, but I'll agree with the one of the commenter that the naming convention seems to screw things up. The targets are selected on both sides, the add class works, but it seem to reload or reconnect the page.

OH!! It's reconnecting because of the # href! Change your <a tags to button and remove the href and it works.

Sorry

The index thing would work, but elements and links are not in same order.

So, your html

<div class="flex bg-white">
  <div class="half" data-controller="effect" >
    <p><a href="#" data-action="effect#highlight" data-effect-target="link" data-link-id="1">Link 1</a></p>
    <p><a href="#" data-action="effect#highlight" data-effect-target="link" data-link-id="2">Link 2</a></p>
    <p><a href="#" data-action="effect#highlight" data-effect-target="link" data-link-id="3">Link 3</a></p>
    <p><a href="#" data-action="effect#highlight" data-effect-target="link" data-link-id="4">Link 4</a></p>
    <p data-effect-target="element" data-element-id="4">Element 4</p>
    <p data-effect-target="element" data-element-id="3">Element 3</p>
    <p data-effect-target="element" data-element-id="1">Element 1</p>
    <p data-effect-target="element" data-element-id="2">Element 2</p>
  </div>

  <div class="half" data-controller="effect">
    <p><a href="#" data-action="effect#highlight" data-effect-target="link" data-link-id="3">Link 3</a></p>
    <p><a href="#" data-action="effect#highlight" data-effect-target="link" data-link-id="4">Link 4</a></p>
    <p><a href="#" data-action="effect#highlight" data-effect-target="link" data-link-id="5">Link 5</a></p>
    <p><a href="#" data-action="effect#highlight" data-effect-target="link" data-link-id="6">Link 6</a></p>
    <p data-effect-target="element" data-element-id="4">Element 4</p>
    <p data-effect-target="element" data-element-id="5">Element 5</p>
    <p data-effect-target="element" data-element-id="6">Element 6</p>
    <p data-effect-target="element" data-element-id="3">Element 3</p>
  </div>
</div>

Stimulus controller

import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  static targets = ["link", 'element']

  connect(){
  }

  highlight() {
    var lnk = event.target.dataset.linkId
    var elems = this.elementTargets
    for (var i = elems.length - 1; i >= 0; i--) {
      if (elems[i].dataset.elementId == lnk){
        elems[i].classList.add('text-blue-700')
        console.log(elems[i])
        break
      }
    }
  }

For some reason the class added to element is in the html, but not change?(in Safari, but ok in firefox)
anyway no DOM id, just targets.

回复 原文
℉絮湮 2025-02-05 20:16:20

主要思想是控制器是“可重复使用的”。因此，可以创建许多控制器。

而不是：

  <div class="half" data-controller="effect" >
    <p><a href="#" data-action="effect#highlight" data-effect-target="link" data-link-id="1">Link 1</a></p>
    <p><a href="#" data-action="effect#highlight" data-effect-target="link" data-link-id="2">Link 2</a></p>
    <p><a href="#" data-action="effect#highlight" data-effect-target="link" data-link-id="3">Link 3</a></p>
    <p><a href="#" data-action="effect#highlight" data-effect-target="link" data-link-id="4">Link 4</a></p>
  </div>

您应该

  <div class="half">
    <p data-controller="effect" ><a href="#" data-action="effect#highlight" data-effect-target="link" data-link-id="1">Link 1</a></p>
    <p data-controller="effect" ><a href="#" data-action="effect#highlight" data-effect-target="link" data-link-id="2">Link 2</a></p>
    <p data-controller="effect" ><a href="#" data-action="effect#highlight" data-effect-target="link" data-link-id="3">Link 3</a></p>
    <p data-controller="effect" ><a href="#" data-action="effect#highlight" data-effect-target="link" data-link-id="4">Link 4</a></p>
  </div>

在控制器的代码中设置：

highlight() {
    var lnk = this.linkTarget;
    var id = lnk.dataset.linkId;
}

The main idea is that the controller is "reusable". So, it's ok to create a number of controllers.

Instead of:

  <div class="half" data-controller="effect" >
    <p><a href="#" data-action="effect#highlight" data-effect-target="link" data-link-id="1">Link 1</a></p>
    <p><a href="#" data-action="effect#highlight" data-effect-target="link" data-link-id="2">Link 2</a></p>
    <p><a href="#" data-action="effect#highlight" data-effect-target="link" data-link-id="3">Link 3</a></p>
    <p><a href="#" data-action="effect#highlight" data-effect-target="link" data-link-id="4">Link 4</a></p>
  </div>

you should set

  <div class="half">
    <p data-controller="effect" ><a href="#" data-action="effect#highlight" data-effect-target="link" data-link-id="1">Link 1</a></p>
    <p data-controller="effect" ><a href="#" data-action="effect#highlight" data-effect-target="link" data-link-id="2">Link 2</a></p>
    <p data-controller="effect" ><a href="#" data-action="effect#highlight" data-effect-target="link" data-link-id="3">Link 3</a></p>
    <p data-controller="effect" ><a href="#" data-action="effect#highlight" data-effect-target="link" data-link-id="4">Link 4</a></p>
  </div>

Then, in controller's code:

highlight() {
    var lnk = this.linkTarget;
    var id = lnk.dataset.linkId;
}
回复 原文
~没有更多了~

关于作者

别再吹冷风

暂无简介

文章
评论
383 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

alipaysp_snBf0MSZIv

文章 0 评论 0

梦断已成空

文章 0 评论 0

瞎闹

文章 0 评论 0

凯凯我们等你回来

文章 0 评论 0

寄意

文章 0 评论 0

似梦非梦

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文