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

我对jQuery和JavaScript比较陌生，所以我遇到了这个问题，希望您能帮助我解决这个问题

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

问题可分为两部分：

• 问题的第一部分在于cloth#显示用户将布料添加到购物车的位置：
  表格：

  <%= 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 %>
  

  //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;
  });
  

  <%= 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 %>
  

  //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函数不会被调用，因此它会转到链接（我甚至尝试编写

  e.preventDefault（）

  和

  同时返回false

  ）

• 问题的第二部分出现在购物车中，用户可以看到他所有衣服的摘要。在这里，它显示一个表格，每一行都是一块布料，用户可以在这里看到布料的图像、描述、选定的颜色、选定的尺寸和价格。“颜色和尺寸”部分是为用户设计的，因此，如果用户改变主意并选择其他尺寸或颜色，他可以编辑其布料。这里的问题是尺寸和颜色，我不知道为什么。在“颜色”部分中，情况与上面完全相同，但在“大小”部分中，他只能单击一次，因为如果他再单击一次，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 %>
  

  //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;
  });
  

  <%= 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 %>
  

  //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();
  });
  

  在这里，我只做了size函数，因为我不知道如何修复颜色函数，但这也有一个bug，只在第一次调用它。无论您选择哪种布料的尺寸，都会发生这种情况，例如，如果我更改第一种布料的尺寸效果良好，但如果我想再次更改同一种布料的尺寸或更改另一种布料的尺寸，则不会调用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 %>

//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;
});

<%= 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 %>

//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();
});

我已经对第二个问题发生的原因进行了更多的研究，我发现它可能与Ajax有关，因为在我的表格中，如果用户更改了大小或颜色，它就会通过Ajax完成，正如我们所看到的。我尝试了第二种解决方案，但没有成功：

$('.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“链接圆”上。看起来您可能正在呈现具有相同id的多个元素。选择大小函数基于可以在多个元素上使用的类。但是，根据，在多个元素上不能具有相同的id。尝试将“链接圈”更改为这样的类

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

---

太好了，我不知道身份证和班级的区别，我想这是一个很好的区别。这使得第一部分开始工作，谢谢。但是现在我在carts#show中遇到了与大小输入相同的问题，您知道为什么吗？您的jquery选择器正在寻找一个具有“normal size”和“cart el”类的锚元素。在回调函数中，您删除了“正常大小”类，因此jquery选择器不再适用于该类。您可以将选择器更改为

$（'a.cart-el'）

，并确保所有锚点上的类都是“cart el”。但是，当我将

所选的
类删除到同级时，我正在添加
正常大小的
，不管怎样，我尝试了您提到的方法，但仍然发生相同的事情，第一个很好，其他的没有，我必须重新加载页面（在我看来，这似乎是TurboLink的一个问题，但我有修复这个问题的gem）。现在，颜色输入工作正常，如果用户更改颜色，然后尝试更改大小，则会出现问题，反之亦然。如果您可以包含呈现的html，这将非常有用。当然，我使用html和javascript创建了一个。谢谢你的帮助，谢谢。