JS 在 Rails 中。循环每个rails然后在JS中获取类答案

【问题标题】：JS in rails. loop each of rails then get the class in JSJS 在 Rails 中。循环每个rails然后在JS中获取类
【发布时间】：2021-03-30 19:05:27
【问题描述】：

嗨，我通过 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), method: :post, 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', function() {
  int = parseInt(scoreValue.innerHTML, 10)-1;
  quantityValue.value = int;
  scoreValue.textContent = int;
});

【问题讨论】：

标签： javascript ruby-on-rails

【解决方案1】：

我不知道我是否理解，因为有多种不同的编程语言。但是对于 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">

【讨论】：

【解决方案2】：

只需使用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 兼容的东西，您可以将其放入您的资产管道（或包）中。

【讨论】：