时间戳

首页 > 解决方案 > ruby on rails 在 onclick 内创建循环

ruby-on-rails - ruby on rails 在 onclick 内创建循环

问题描述

我怎样才能在里面做一个循环，currentSlide(1)所以我希望每次工作都.each添加currentSlide(1)然后等等。currentSlide(2)currentSlide(3)

<div class="approach" id="app">
<style>
@media (max-width: 600px){
.btn {
   padding: 2px 2px 2px 2px !important; */
}}
#myBtnContainer{
  display: flex;
}
/* Create three equal columns that floats next to each other */
.column {
  float: left;
  display: none;
  margin: 5px;
  border: 1px solid #ccc;
  float: left;
  width: 282px;
}
.column:hover{
  border: 1px solid #777;
}

/* Clear floats after rows */ 
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Content */
.content {
  width: 100%;
  height: 400px;
  overflow: hidden;
  /*display: flex;*/
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
}
.content img{
  object-fit: cover;
  height: auto;
  width: 100%;
  position: absolute;
}

/* The "show" class is added to the filtered elements */
.show {
  display: block;
}

/* Style the buttons */
.btn {
  border: none;
  outline: none;
  padding: 10px 10px;
  background-color: #333333;
  cursor: pointer;
  color: white;
}

.btn:hover {
  background-color: #ddd;
}

.btn.active {
  background-color: #666;
  color: white;
}

.modal {
  display: none;
  position: fixed;
  z-index: 1;
  padding-top: 100px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: black;
}

/* Modal Content */
.modal-content {
  position: relative;
  background-color: #fefefe;
  margin: auto;
  padding: 0;
  width: 90%;
  max-width: 500px;
}

/* The Close Button */
.close {
  color: white !important;
  position: absolute;
  top: 170px;
  right: 25px;
  font-size: 35px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #999;
  text-decoration: none;
  cursor: pointer;
}

.mySlides {
  display: none;
}

.cursor {
  cursor: pointer
}

/* Next & previous buttons */
.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -50px;
  color: white;
  font-weight: bold;
  font-size: 20px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

img {
  margin-bottom: -4px;
}

.caption-container {
  text-align: center;
  background-color: black;
  padding: 2px 16px;
  color: white;
}

.demo {
  opacity: 0.6;
}

.active,
.demo:hover {
  opacity: 1;
}

img.hover-shadow {
  transition: 0.3s
}

.hover-shadow:hover {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)
}
.mySlides img{
  padding-top: 70px;
  background-color: black;
}
div.desc {
  padding: 15px;
  text-align: center;
}
@media (max-width:600px) {
.close {
    color: white !important;
    position: absolute;
    top: 120px;
    right: 25px;
    font-size: 45px;
    font-weight: bold;
    z-index: 1000;
}
.column {
  float: left;
  display: none;
  margin: 5px;
  border: 1px solid #ccc;
  float: left;
  width: 83px;
}
}
@media (max-width: 320px){
  .column {
  float: left;
  display: none;
  margin: 5px;
  border: 1px solid #ccc;
  float: left;
  width: 70px;
}
}
@media only screen and (min-width: 812px) {
.column {
  float: left;
  display: none;
  margin: 5px;
  border: 1px solid #ccc;
  float: left;
  width: 90px;
} }
</style>
<body>




<!-- MAIN (Center website) -->
<div class="container">


<h1>GALLERY</h1>

<div id="myBtnContainer">
  <button class="btn" onclick="filterSelection('conversion')"> Conversion</button>
  <button class="btn" onclick="filterSelection('fixed-hybrid')"> Fixed Hybrid</button>
  <button class="btn" onclick="filterSelection('removal-bar-over-denture')"> Removable Bar Over Denture</button>
  <button class="btn" onclick="filterSelection('surgical-guides')"> Surgical Guides</button>
  <button class="btn active" onclick="filterSelection('all')"> Show all</button>
</div>
<br>
<!-- Portfolio Gallery Grid -->



<div class="row">
  <% @galleries.each do |g| %>
  <% [g.image1, g.image2, g.image3, g.image4, g.image5].compact.each_with_index do |image, index| %>
    
      <div class="column <%= g.product_name %>">
        <div class="content">
          
            <%= image_tag image.url, style: "width:100%", onclick: "openModal();currentSlide(#{index + 1})" ,class: "hover-shadow cursor"%>
            
          
        </div>
      </div>
    
    

<% end %>
<% end %>
<!-- END GRID -->
</div>

<!-- END MAIN -->
</div>

<div id="myModal" class="modal">
  <span class="close cursor" onclick="closeModal()">&times;</span>
    <div class="modal-content">
      <% @galleries.each do |g| %>
        <% [g.image1, g.image2, g.image3, g.image4, g.image5].compact.each_with_index do |image, index| %>
          <div class="mySlides">
            <div class="numbertext">1 / 4</div>
            <%= image_tag image.url, style: "width:100%" %>
          </div>
        <% end %>
      <% end %>
<a class="prev" onclick="plusSlides(-1)">&#10094;</a>
<a class="next" onclick="plusSlides(1)">&#10095;</a>

    <div class="caption-container">
      <p id="caption">hr</p>
    </div>


    </div>


<script>
filterSelection("all")
function filterSelection(c) {
  var x, i;
  x = document.getElementsByClassName("column");
  if (c == "all") c = "";
  for (i = 0; i < x.length; i++) {
    w3RemoveClass(x[i], "show");
    if (x[i].className.indexOf(c) > -1) w3AddClass(x[i], "show");
  }
}

function w3AddClass(element, name) {
  var i, arr1, arr2;
  arr1 = element.className.split(" ");
  arr2 = name.split(" ");
  for (i = 0; i < arr2.length; i++) {
    if (arr1.indexOf(arr2[i]) == -1) {element.className += " " + arr2[i];}
  }
}

function w3RemoveClass(element, name) {
  var i, arr1, arr2;
  arr1 = element.className.split(" ");
  arr2 = name.split(" ");
  for (i = 0; i < arr2.length; i++) {
    while (arr1.indexOf(arr2[i]) > -1) {
      arr1.splice(arr1.indexOf(arr2[i]), 1);     
    }
  }
  element.className = arr1.join(" ");
}


// Add active class to the current button (highlight it)
var btnContainer = document.getElementById("myBtnContainer");
var btns = btnContainer.getElementsByClassName("btn");
for (var i = 0; i < btns.length; i++) {
  btns[i].addEventListener("click", function(){
    var current = document.getElementsByClassName("active");
    current[0].className = current[0].className.replace(" active", "");
    this.className += " active";
  });
}
</script>

</div>

<script>
function openModal() {
  document.getElementById('myModal').style.display = "block";
}

function closeModal() {
  document.getElementById('myModal').style.display = "none";
}

var slideIndex = 1;
showSlides(slideIndex);

function plusSlides(n) {
  showSlides(slideIndex += n);
}

function currentSlide(n) {
  showSlides(slideIndex = n);
}

function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("demo");
  var captionText = document.getElementById("caption");
  if (n > slides.length) {slideIndex = 1}
  if (n < 1) {slideIndex = slides.length}
  for (i = 0; i < slides.length; i++) {
      slides[i].style.display = "none";
  }
  for (i = 0; i < dots.length; i++) {
      dots[i].className = dots[i].className.replace(" active", "");
  }
  slides[slideIndex-1].style.display = "block";
  dots[slideIndex-1].className += " active";
  captionText.innerHTML = dots[slideIndex-1].alt;
}
</script>

标签： ruby-on-rails

解决方案

看起来你只需要一个索引来插入currentSlide.

从删除重复开始，而不是检查每个相关的图像，<% if g.image1.present? %>将它们放入一个数组并迭代它：

<% [g.image1, g.image2, g.image3].compact.each_with_index do |image, index|

compact将确保仅存在当前图像，因此您不必再使用if present。

然后使用onclick: "openModal();currentSlide(#{index + 1})"（因为索引从 0 开始，你似乎需要它从 1 开始）

更新：

<% @galleries.each do |g| %>
  <% [g.image1, g.image2, g.image3, g.image4, g.image5].compact.each_with_index do |image, index| %>
    <div class="column <%= g.product_name %>">
    <div class="content">
    <%= image_tag image.url,
        alt: "conversion",
        style: "width:100%",
        onclick: "openModal();currentSlide(#{index + 1})",
        class: "hover-shadow cursor" %>
  </div>
</div>

推荐阅读