ruby-on-rails 如何在我的模式中显示我点击的图像？

yxyvkwin 于 2023-04-08 发布在 Ruby

关注(0)|答案(1)|浏览(106)

我是JS的新手，我用Stimulus学的，我用Rails。我一直试图在我的模态中显示我从画廊点击的图像，但它总是显示我画廊的第一张图像。我不知道如何定位我的img的src。这是我的索引页。

<div class="container mb-5">
  <h1 class='headers'>This is my personal art page</h1>
  <div class='image_container' id='app' data-controller="clickable_images">
    <% @personals.each do |personal| %>
      <div class='img-box'>
        <button data-action="click->clickable_images#expandImage"><%= cl_image_tag personal.image.key, class: 'personal_img', data: { target: "image" } %></button>
      </div>

      <div class="modal" data-controller="slider" data-clickable_images-target="modal">
        <div class="modal-dialog">
          <div class="modal-content">
            <%= cl_image_tag personal.image.key %>
            <button data-action="click->slider#close">Close</button>
          </div>
        </div>
      </div>
    <% end %>
  </div>
</div>`

这是我的两个刺激控制器。模态打开和关闭我似乎无法瞄准正确的东西。当我打开我的控制台并按下图像时，它工作了，它显示我点击了不同的图像，但我如何瞄准动态源，以便能够在我的模态中显示点击的图像？

import { Controller } from "stimulus";

export default class extends Controller {

  open() {
    document.body.classList.add("modal-open");
    this.element.setAttribute("style", "display: block;");
    this.element.classList.add("show");
    document.body.innerHTML += '<div class="modal-backdrop fade show"></div>';
  }

  close() {
    document.body.classList.remove("modal-open");
    this.element.removeAttribute("style");
    this.element.classList.remove("show");
    document.getElementsByClassName("modal-backdrop")[0].remove();
  }
}

import { Controller } from "@hotwired/stimulus"

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

  expandImage(event) {
    let sliderController = this.application.getControllerForElementAndIdentifier(
      this.modalTarget,
      "slider"
    );

    sliderController.open();

    console.log(event.currentTarget);
  }
}

ruby-on-rails

来源：https://stackoverflow.com/questions/75906321/how-to-display-the-image-i-click-on-in-my-modal

1条答案

按热度按时间

ss2ws0br1#

原来的方法的问题是你的控制器的交叉引用是错误的。

let sliderController = this.application.getControllerForElementAndIdentifier(
      this.modalTarget,
      "slider"
    );

在这里，你有this.modalTarget，但是你的可点击图像控制器不在模板循环的范围内。所以它每次都选择modalTarget，但只是第一个。如果你使用this.modalTargets，Stimulus会返回所有的modals，但是你需要一种方法来知道哪个按钮点击了这些目标上的哪个“索引”。
我建议你保持这种方法的简单性，只需要一个控制器（例如viewbox控制器），它可以在一个类中完成你所需要的任务。你可以称之为clickable-images，但这很长，简单就好。
所以，让我们修改HTML;
1.记住可访问性，避免尝试使非按钮的东西可点击，但如果你必须，确保你包括正确的属性。此外，按钮类型应该是'button'，否则浏览器将把它视为提交并重新加载页面。给予按钮一个标签。
1.将控制器放在 Package 器div.img-box上
1.预览图像上不需要目标，因为它不被使用
1.使模型成为ViewBox控制器的目标

<div class="container mb-5">
  <h1 class='headers'>This is my personal art page</h1>
  <div class='image_container' id='app'>
    <% @personals.each do |personal| %>
      <div class='img-box' data-controller="viewbox">
        <div class='preview-container'>
          <button type="button" data-action="click->viewbox#open">View</button>
          <%= cl_image_tag personal.image.key, class: 'personal_img' %>
        </div>
        <div class="modal" data-viewbox-target="modal">
          <div class="modal-dialog">
            <div class="modal-content">
              <%= cl_image_tag personal.image.key %>
              <button data-action="click->viewbox#close">Close</button>
            </div>
          </div>
        </div>
      </div>
    <% end %>
  </div>
</div>

现在，让我们修改一下模态控制器，它现在几乎完全相同，只是模态内容是一个目标。

import { Controller } from "stimulus";

export default class extends Controller {
  static targets = ['modal'];

  open() {
    const modal = this.modalTarget;
    document.body.classList.add("modal-open");
    modal.setAttribute("style", "display: block;");
    modal.classList.add("show");
    document.body.innerHTML += '<div class="modal-backdrop fade show"></div>';
  }

  close() {
    const modal = this.modalTarget;
    document.body.classList.remove("modal-open");
    modal.removeAttribute("style");
    modal.classList.remove("show");
    document.getElementsByClassName("modal-backdrop")[0].remove();
  }
}

一个小小的题外话--如果你只使用实际的HTML，而不是Ruby on Rails模板语法，人们回答Stimulus问题会容易得多。

赞(0）回复(0）举报 2023-04-08

我来回答

ruby-on-rails 如何在我的模式中显示我点击的图像？

1条答案

相关问题

热门标签

最新问答