Question

我对jQuery和JavaScript比较陌生，所以我有这个问题，希望你能帮我解决这个问题。

我正在制作一个用于在Rails 4中销售布料的电子商务页面，所以我比以往更关注显示形式和所有这些，所以它对用户更具吸引力。因此，我隐藏了表单，并通过jQuery将值设置为它。

问题可分为两部分：

问题的第一部分在布料#show中，用户将布料添加到购物车中：

形式：

<%= 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函数就不会被调用。

希望你能帮助我，提前谢谢。

修改

我已经调查了更多关于为什么会发生第二个问题，我发现它可能与Ajax有关，因为在我的表单中，如果用户更改了Ajax完成的大小或颜色，我们可以看到{{3 }}。我尝试了第二种解决方案，但它不起作用：

$('.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>

Answer 1

您的选择颜色功能已附加到ID“link-circle”。看起来您可能会使用相同的ID呈现多个元素。您的选择尺寸功能基于您可以在多个元素上使用的类。但是，根据w3，您不能在多个元素上使用相同的ID。尝试将“link-circle”更改为类似的类..

<%= link_to "#{co.color_id}", class: "link-circle" do %>

和你的选择器..

$('.link-circle').on('click',function(e){

为什么jQuery只在某些链接中输入函数？

1 个答案: