我对jQuery和JavaScript比较陌生,所以我遇到了这个问题,希望你能帮助我解决这个问题。为什么jQuery只在某些链接中输入函数?
我正在制作一个电子商务页面,用于销售Rails 4中的布料,所以我比以前更专注于显示表单和所有这些形式,因此对用户更具吸引力。正因为如此,我隐藏了表单,并通过jQuery为其设置了值。
这个问题可以分为两个部分可分为:
问题的第一部分是在布#表示用户布添加到自己的购物车:
形式:
<%= form_for @order_item, remote: true do |f| %> <h5>Select a size</h5> <div class="input-sizes"> <% @sis.each do |si| %> <%= link_to si.size.letter, "#{si.size_id}", class:"normal-size" %> <% end %> </div> <%= f.hidden_field :size_id, id: "size-input" %> <h5>Select a color</h5> <div class="input-colors"> <% @cos.each do |co| %> <%= link_to "#{co.color_id}", id: "link-circle" do %> <div id="circle" style="background: <%= co.color.hex %>"> <div id="mini-circle"></div> </div> <% end %> <% end %> </div> <%= f.hidden_field :color_id, id: "color-input" %> ... <% end %>
的jQuery:
//Select size $('a.normal-size').on('click', function(e){ e.preventDefault(); var value = $(this).attr("href"); $('#size-input').val(value); $(this).removeClass("normal-size").addClass("selected").siblings().removeClass("selected").addClass("normal-size"); }); //Select Color $('#link-circle').on('click',function(e){ e.preventDefault(); var value = $(this).attr("href"); $('#color-input').val(value); $(this).children().children().css('opacity', '1'); return false; });
大小输入的设置完美地工作,但在颜色输入中,用户只能选择第一种颜色,因为如果用户想要选择第二种颜色,jQuery函数不会被调用,因此它会转到链接(我试着同时写
e.preventDefault()
和return false
)。问题的第二部分出现在购物车#show中,用户可以看到他所有布料的摘要。在这里它显示了一张桌子,每一排都是布,用户可以看到布的图像,描述,选定的颜色,选定的尺寸和价格。颜色和尺寸部分是为用户制作的,所以如果他改变主意并选择其他尺寸或颜色,他可以编辑他的布料。这里的问题在于大小和颜色,我不知道为什么。在颜色部分发生完全一样的上面,但在大小部分,他只能做一个点击,因为如果他让另一个jQuery函数不会被调用。就像如果点击只能使用一次:
表:
<%= form_for (order_item), remote: true,:url => "/order_items/#{order_item.id}", :html=>{:id=>'item_form_cart'} do |f| %> <div class="input-colors col-md-1"> <% @cos.each do |co| %> <% if co.cloth == order_item.cloth %> <% if co.color_id == order_item.color_id %> <%= link_to "#{co.color_id}", id: "link-circle" do %> <div id="circle" style="background: <%= co.color.hex %>;"> <div id="mini-circle" style="opacity: 1;"></div> </div> <% end %> <% else %> <%= link_to "#{co.color_id}", id: "link-circle" do %> <div id="circle" style="background: <%= co.color.hex %>;"> <div id="mini-circle"></div> </div> <% end %> <% end %> <% end %> <% end %> </div> <%= f.hidden_field :color_id, id: "color-input" %> <div class="input-sizes col-md-2"> <% @sis.each do |si| %> <% if si.cloth == order_item.cloth %> <% if order_item.size_id == si.size_id %> <%= link_to si.size.letter, "#{si.size_id}", class:"selected" %> <% else %> <%= link_to si.size.letter, "#{si.size_id}", class:"normal-size cart-el" %> <% end %> <% end %> <% end %> </div> <%= f.hidden_field :size_id, id: "size-input-cart" %> ... <% end %>
的jQuery:
//Select size $('a.normal-size.cart-el').on('click',function(e){ e.preventDefault(); var value = $(this).attr("href"); $(this).parent().next('#size-input-cart').val(value); $(this).removeClass("normal-size").addClass("selected").siblings().removeClass("selected").addClass("normal-size"); $(this).closest('#item_form_cart').submit(); });
在这里我只能让大小功能,因为我不知道怎么样修正颜色,但这也有一个错误,只有第一次被调用。无论您选择哪种布尺寸,都会发生这种情况。如果我更改第一块布料的尺寸效果不错,但如果我想再次更改相同布料的尺寸或更改另一块布料的尺寸,则不会调用jQuery函数。
希望你能帮助我, 在此先感谢。
编辑:
我已经调查了解为什么发生的第二个问题,我看到了,它可以如果用户更改大小或颜色它就会通过做涉及到阿贾克斯,因为在我的表格阿贾克斯,我们可以看到here。我想第二个解决方案,但它没有工作:
$('.well').on('click','a.normal-size.cart-el',function(e){
e.preventDefault();
var value = $(this).attr("href");
$(this).parent().next('#size-input-cart').val(value);
$(this).removeClass("normal-size").addClass("selected").siblings().removeClass("selected").addClass("normal-size");
$(this).closest('#item_form_cart').submit();
});
$('.well').on('click','.link-circle.cart-el',function(e){
e.preventDefault();
var value = $(this).attr("href");
$(this).parent().next('#color-input-cart').val(value);
$(this).siblings().children().children().css('opacity', '0');
$(this).children().children().css('opacity', '1');
$(this).closest('#item_form_cart').submit();
});
这里是在视图中绘制的每个项目:
<div class="order_items">
<% @order_items.each do |order_item| %>
<div class = "well">
<%= render 'carts/cart_row', cloth: order_item.cloth, order_item: order_item, show_total: true %>
</div>
<% end %>
</div>
太好了,我不知道我想这ID和类之间的区别是一个很好的。这使第一部分工作,谢谢。但是现在我在购物车中遇到同样的问题#显示尺寸输入,你知道为什么吗? –
你的jquery选择器正在寻找一个“正常大小”和“cart-el”类的锚元素。在你的回调函数中,你正在移除“正常大小”的类,所以jquery选择器不再适用它了。您可以将选择器更改为'$('a.cart-el')',并确保所有锚点上的类为“cart-el”。 –
但是,当我将'selected'类移除给兄弟姐妹时,我添加了'normal-size',无论如何我尝试了你提到的并且仍然发生了同样的事情,第一个工作正常,其他人不需要重新加载该页面(在我看来,像turbolinks的问题,但我有解决这个问题的宝石)。现在颜色输入起作用了,如果用户改变颜色,然后尝试改变尺寸,问题就会发生,反之亦然。 –