导轨和 Javascript 问题答案

【问题标题】：RAILS & Javascript issue导轨和 Javascript 问题
【发布时间】：2016-06-06 15:08:40
【问题描述】：

我可能在这里做了一些愚蠢的事情，但由于某种原因，我似乎无法弄清楚。只需要有人指出我做错了什么。

基本上，我正在循环浏览此 div 中的图像。它们是同一对象的图像，只是视图不同。

<div class="ind">
 <%= link_to product_path(product) do %>
   <%= image_tag product.secimage_url(:index).to_s, class: 'current' %>
   <%= image_tag product.image_url(:index).to_s, class: 'product' %>
 <% end %>
</div>

'current' 是应该在:hover 的'product' 上显示的第二个视图

CSS 代码

.product {
position: relative;
top: 0;
}

.current {
position: absolute;
top: 0;
}

Javascript 代码

var main = function() {
$('.product').hover(function() {
$(this).hide(1);
});

$('.current').mouseleave(function() {
$('.product').show(1);  
}); 
};

我已经设法将一个隐藏在另一个之后，当您悬停时，它会显示第二个视图但是，由于 CSS 中的 relative 和 absolute，页面上的其他元素最终会移动并且页面会移动杂乱无章。

寻找一种解决方案，既能做同样的事情，又不会弄乱其他对象的布局。

提前致谢！

【问题讨论】：

标签： javascript jquery css ruby-on-rails ruby-on-rails-4

【解决方案1】：

我会将您想要隐藏的默认设置设置为 style: "display: none;" 或者如果您有 hide 类。然后添加一个您认为与两者相关的任何名称的切换类并执行

  $(".toggle").mouseover(function() {
    $(".toggle").toggle();
  }).mouseout(function() {
    $(".toggle").toggle();
  });;

toggle 类的原因是，如果你把它放在 .current 的鼠标悬停和另一个 .product 的鼠标悬停上，它会在两者之间快速切换。您需要任何职位等。

【讨论】：

感谢您的回答，它有效，但它是一家商店，因此所有其他图像也会随着您悬停的图像而改变。试图确保只有悬停的图像发生变化...

【解决方案2】：

我最终通过将图像类名称更改为image 并将hide 类添加到辅助图像来修复它，因此它开始隐藏。

因为 Rails 循环生成了其他图片，所以第一个答案一次切换了所有图片。所以我在父 div 上使用了一个 javascript 循环，它起作用了。

这是新代码

<div class="ind">
<%= link_to product_path(product) do %>
  <%= image_tag product.secimage_url(:index).to_s, class: "image hide" %>
  <%= image_tag product.image_url(:index).to_s, class: "image" %>
<% end %>

Javascript 代码

var toggleProductImage = function() {
$(this).children().each(function() {
this.classList.toggle('hide');
})
}

$('.ind a').each(function() {
$(this).mouseenter(toggleProductImage);
$(this).mouseleave(toggleProductImage);
});

CSS

.hide {
   display: none;
}

.image {
   position: relative;
   top: 0;
}

.ind {
   display: inline-block;
}

【讨论】：