JS 中的轨道循环每个导轨然后在 JS 中获取类

问题描述

嗨，我正在通过 JS 创建一个点击按钮，每次点击都是 +1 或 -1。

我想要做的：在 rails 中，每个循环从@items 创建的项目。获取JS中的类名并编辑每个项目的数量。我该怎么办？

我试图获取 ID，但我只知道第一个工作。

The part of to get class

    <div class="quantity-select">                           
        <div class="entry value-minus">&nbsp;</div>
            <div class="entry value score-value"><%= uiq %></div>
        <div class="entry value-plus active">&nbsp;</div>
    </div>

show.html.erb

<% @items.zip(@user_items_quantity) do | item,uiq | %>
    <tr class="rem1">
        <td class="invert-image" >
            <%= link_to image_tag(item.img.thumb.url || "sushi1.jpg",class: "img-responsive" ),item %>
        </td>

        <td class="invert">
            <%= form_with model: item.basket_items.build,url: baskets_edit_from_baskets_path(item),method: :post,remote: true do |f| %>
                <div class="quantity"> 
                    <div class="quantity-select">                           
                        <div class="entry value-minus">&nbsp;</div>
                            <div class="entry value score-value"><%= uiq %></div>
                        <div class="entry value-plus active">&nbsp;</div>
                    </div>
                </div>
                <%= f.hidden_field :item_id,value: item.id %>
                <%= f.hidden_field :quantity,class: "quantity-value" %>
                <%= f.submit "edit",class: "button mt-3" %>
            <% end %>
        </td>
        <td class="invert"><%= link_to item.name,item %></td>
        <td class="invert">$ <%= link_to item.price,item %></td>
        <td class="invert">
            <%= link_to image_tag("close_1.png"),item_delete_in_baskets_path(item),data: { confirm: "You sure?" },class:"ml-2"%>
        </td>
    </tr>

<% end %>
<%= javascript_include_tag 'item_quantity.js' %>

我的尝试

var add = document.getElementsByClassName("value-plus");
var remove = document.getElementsByClassName("value-minus");
var scoreValue = document.getElementsByClassName("score-value");

var quantityValue = document.getElementsByClassName("quantity-value");


add.addEventListener('click',function() {
  int = parseInt(scoreValue.innerHTML,10)+1;
  quantityValue.value = int;
  scoreValue.textContent = int;
});
remove.addEventListener('click',10)-1;
  quantityValue.value = int;
  scoreValue.textContent = int;
});

解决方法

我不知道我是否理解，因为有多种不同的编程语言。但是关于 JS 代码，您可以使用此代码作为基础来实现更好的东西。我尝试只使用您在 HTML 代码中使用的类。我认为这个值 var quantityValue = document.getElementsByClassName("quantity-value"); 应该是数量选择，或者不是。

示例代码：

var quantities = document.getElementsByClassName("quantity-select");
var quantityValueElement = 0;

for(let quantity of quantities){
  quantity.addEventListener("click",function(event){
    let clickedDivQuantitySelect = event.target.parentElement;
    let classNameOperator = event.target.className;
    quantityValueElement = clickedDivQuantitySelect.querySelector(".value");
   
    if(classNameOperator === "value-minus"){
      quantityValueElement.innerText = actionsOperator.minus();
    }
    if(classNameOperator === "value-plus"){
      quantityValueElement.innerText =  actionsOperator.plus();;
    }
  })
}

const actionsOperator = {
  minus: function(){
    return --quantityValueElement.innerText;
  },plus: function(){
    return ++quantityValueElement.innerText;
  }
}

    body{display: flex;}
    .quantity-select{
        display: flex;
        margin:10px;
    }
    .value-plus{
        font-size: 25px;
        cursor: pointer;
        margin-right: 6px;
    }
    .value-minus{
        font-size: 25px;
        cursor: pointer;
        margin-left: 6px;
    }
    .value{
        font-size: 25px;
        cursor: default;
    }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>BTN PLUS MINUS</title>
</head>
<body>
    <div class="quantity-select">
        <div class="value-plus">+</div>
        <div class="value">0</div>
        <div class="value-minus">-</div>
    </div>
    <div class="quantity-select">
        <div class="value-plus">+</div>
        <div class="value">0</div>
        <div class="value-minus">-</div>
    </div>
    <div class="quantity-select">
        <div class="value-plus">+</div>
        <div class="value">0</div>
        <div class="value-minus">-</div>
    </div>
</body>
</html>

注意 event.target.parentElement;将获得父 div：<div class="quantity-select">

只需使用 Element.closest() 向上遍历到表单元素：

// delegated event handler because Turbolinks is a thing
document.addEventListener('click',(event) => {
  let el = event.target;
  if (!el.matches('.quantity-select>.value-minus,.quantity-select>.value-plus')) {
    return false;
  }
  let quantity = el.closest('form').elements['quantity'];
  let val = parseInt(quantity.value,10);
  quantity.value = el.classList.contains('value-plus') ? ++val : --val;
});

也不需要单独的脚本标签。只需编写一个幂等的委托处理程序，您就会拥有一个与 turbolinks 兼容的东西，您可以将其放入您的资产管道（或包）中。

javascript ruby-on-rails