2020年新年大赛！

Question

Егор

Asked:2022-07-26 18:32:38 +0000 UTC2022-07-26 18:32:38 +0000 UTC 2022-07-26 18:32:38 +0000 UTC

如何用篮子覆盖数组？

772

我制作了一个购物车，从数组中获取 id 值、价格、数量、产品类型和名称。

篮子本身的布局看起来像这样：

$( 'body' ).on( 'click', 'button.plus, button.minus', function() {
 
        var qty = $(this).parent().find( 'input' ),
            val = parseInt( qty.val() ),
            min = parseInt( qty.attr( 'min' ) ),
            max = parseInt( qty.attr( 'max' ) ),
            step = parseInt( qty.attr( 'step' ) );

        // дальше меняем значение количества в зависимости от нажатия кнопки
        if ( $( this ).is( '.plus' ) ) {
            if ( max && ( max <= val ) ) {
                qty.val( max );
            } else {
                qty.val( val + step );
            }
        } else {
            if ( min && ( min >= val ) ) {
                qty.val( min );
            } else if ( val > 1 ) {
                qty.val( val - step );
            }
        }

        });

.text-success{
  color: #68A4C4!important; 
}

.name_value{
  display: flex;
  justify-content: space-between; 
  font-weight: 700;

}
.spisok_value{ 

}
.position{ 
  display: flex;
  width: 20%; 
  justify-content: center;
}

.id_position{
  width: 90%; 
  display: flex;        
  justify-content: space-between;
}

.input-cart-form {
display: flex;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id=" ">
                            <div class=" ">  
                                <h1 style="text-align: center; margin: 0 0 25px;">Корзина</h1>  
                            </div> 
                            <div class="name_value"> 
                                <div class="position">
                                    <p>Название</p>
                                </div>
                                <div class="position">
                                    <p>Количество</p>
                                </div>
                                <div class="position">
                                    <p>Цена</p>
                                </div>
                                <div class="position">
                                    <p>Сумма</p> 
                                </div>
                            </div> 
                            <div class="spisok_value">    
                                <div class="id_position" id="50">  
                                            <div class="position">
                                                <p>Композиция Нептун</p>
                                            </div>                    
                                            <div class="position">
                                                <div class="input-number">
                                                    <button type="button" class="input-cart-form input-number-down minus">-</button>
                                                    <input class="qty" type="number" value="2" id="50" min="1" max="50" step="1">
                                                    <button type="button" class="input-number-up  plus">+</button>
                                                </div> 
                                            </div>
                                            <div class="position">
                                                <input id="price" class="input-cart-form" value="2000">  
                                            </div>
                                            <div class="position">
                                                <input class="input-cart-form" id="summ-cart" value="4000">
                                            </div>
                                        </div><div class="id_position" id="49">  
                                            <div class="position">
                                                <p>Букет Уран</p>
                                            </div>                    
                                            <div class="position">
                                                <div class="input-number">
                                                    <button type="button" class="input-cart-form input-number-down minus">-</button>
                                                    <input class="qty" type="number" value="1" id="49" min="1" max="50" step="1">
                                                    <button type="button" class="input-number-up  plus">+</button>
                                                </div> 
                                            </div>
                                            <div class="position">
                                                <input id="price" class="input-cart-form" value="2000">  
                                            </div>
                                            <div class="position">
                                                <input class="input-cart-form" id="summ-cart" value="2000">
                                            </div>
                                        </div><div class="id_position" id="46">  
                                            <div class="position">
                                                <p>Композиция Космический</p>
                                            </div>                    
                                            <div class="position">
                                                <div class="input-number">
                                                    <button type="button" class="input-cart-form input-number-down minus">-</button>
                                                    <input class="qty" type="number" value="5" id="46" min="1" max="50" step="1">
                                                    <button type="button" class="input-number-up  plus">+</button>
                                                </div> 
                                            </div>
                                            <div class="position">
                                                <input id="price" class="input-cart-form" value="5000">  
                                            </div>
                                            <div class="position">
                                                <input class="input-cart-form" id="summ-cart" value="25000">
                                            </div>
                                        </div>                          </div> 
                            <div class="name_value"> 
                                <div class="position">
                                    <p>Итого</p>
                                </div>
                                <div class="position">
                                    <p>
                                    8   
                                    </p>
                                </div>
                                <div class="position">
                                    <p> </p>
                                </div>
                                <div class="position">
                                    <p>31000</p> 
                                </div>
                            </div> 
                    
                        </div>

添加了更改商品数量的按钮，数量会发生变化，但是如何将新的数量值写入数组，只需用特定产品的数量覆盖该值即可。数组如下所示：
Array ( [50] => Array ( [bouquet] => Composition [id] => 50 [name] => Neptune [kol] => 2 [price] => 2000 ) [49] = > Array ( [bouquet] => Bouquet [id] => 49 [name] => Uranus [kol] => 1 [price] => 2000 ) [46] => Array ( [bouquet] => Composition [id] => 46 [名称] => 宇宙 [kol] => 5 [价格] => 5000 ) )

我尝试通过类推商品添加到购物车的方式发送数据，没有成功，甚至错误都没有出现：

$( 'body' ).on( 'click', '[name="update_cart"]', function() {
     

        var kol = document.getElementById('qty').value; //Получаем количество из поле ввода
        var id = document.getElementById('.id_position').id; //Получаем ID товара 
        
        var formData = new FormData(); //Создадим объект для передачи данных
        formData.append('id', id); //Добавим переменную с ID товара             
        formData.append('kol', kol); //Добавим переменную с количеством товаров 
        
        //ajax
        var HttpRequest = new XMLHttpRequest(); //Создадим объект для отправки AJAX запроса
        HttpRequest.onload = function (e) {
            if (this.status == 200) { //Проверка что результат отчета успешный (может быть 404 или другие)
                 
                alert('Успешно обновлен'); 
                 
                document.getElementById('chart-value').innerText = this.response; //Записываем цифру в элемент корзины в верстке
            } else {
                alert('Ошибка');
            }
        }; //Функция в которую возвращается ответ от сеовера
        HttpRequest.open("POST", '/cart/', true); //Настройка запроса для отправки (второй параметр путь к PHP скрипту)
        HttpRequest.send(formData); //Отправка запроса на сервер


    } );

我用这样的产品生成了页面：

<div class="spisok_value">    
                            <?
                            $mass = $_SESSION['BX_CART']['ids'];            
                            foreach ($mass as $value) { 
                                $summ = $value[price]*$value[kol];
                                $nametype = $value[bouquet] . " " . $value[name];        
                                echo (
                                    
                                    "<div class='id_position' id='$value[id]'>  
                                        <div class='position'>
                                            <p>$nametype</p>
                                        </div>                    
                                        <div class='position'>
                                            <div class='input-number'>
                                                <button type='button' onclick='stepDown()' class='input-cart-form input-number-down minus' >-</button>
                                                <input  class='qty' type='number' value='$value[kol]' id='$value[id]' min='1' max='50' step='1'>
                                                <button type='button' onclick='steUp()' class='input-number-up  plus'>+</button>
                                            </div> 
                                        </div>
                                        <div class='position'>
                                            <input id='price'   class='input-cart-form' value='$value[price]'>   
                                        </div>
                                        <div   class='position'>
                                            <input class='input-cart-form' id='summ-cart' value='$summ'>
                                        </div>
                                    </div>"   
                                );
                            };?>
                        </div>

是否有可能在不重新加载页面的情况下以某种方式完成这一切？

1 个回答

Voted

Jean-Claude · Answer 1 · 2022-07-26T19:45:11Z

首先，您没有任何 id = qty 的元素，因此您无法使用var kol = document.getElementById('qty').value;.

其次，这种方式你提取一对值id-количество，你可以有几个这样的值对（几个产品）。

自动获取所有表单数据更容易。为此，<form>在您的输入字段周围添加一个 html 标记，向输入字段添加一个属性name，就像我在上面所做的那样<input name="product-id49">。然后，在命名输入字段中输入的所有数据将使用新的 Formdata()构造自动获取。

    var form = document.forms.namedItem("form");
    var formData = new FormData(form);

然后将此数组发送到服务器。

您使用的append()方法允许您手动添加数据，但是您必须使用循环从输入字段中顺序提取数据并将它们放入 objectformData中。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="">
  <div class=" ">
    <h1 style="text-align: center; margin: 0 0 25px;">Корзина</h1>
  </div>
  <div class="name_value">
    <div class="position">
      <p>Название</p>
    </div>
    <div class="position">
      <p>Количество</p>
    </div>
    <div class="position">
      <p>Цена</p>
    </div>
    <div class="position">
      <p>Сумма</p>
    </div>
  </div>
  <div class="spisok_value">
    <form name="form">
      <div class="id_position" id="50">
        <div class="position">
          <p>Композиция Нептун</p>
        </div>
        <div class="position">
          <div class="input-number">
            <button type="button" class="input-cart-form input-number-down minus">-</button>
            <input class="qty" type="number" value="2" id="50" name="product-id50" min="1" max="50" step="1">
            <button type="button" class="input-number-up  plus">+</button>
          </div>
        </div>
        <div class="position">
          <input id="price" class="input-cart-form" value="2000">
        </div>
        <div class="position">
          <input class="input-cart-form" id="summ-cart" value="4000">
        </div>
      </div>
      <div class="id_position" id="49">
        <div class="position">
          <p>Букет Уран</p>
        </div>
        <div class="position">
          <div class="input-number">
            <button type="button" class="input-cart-form input-number-down minus">-</button>
            <input class="qty" type="number" value="1" id="49" name="product-id49" min="1" max="50" step="1">
            <button type="button" class="input-number-up  plus">+</button>
          </div>
        </div>
        <div class="position">
          <input id="price" class="input-cart-form" value="2000">
        </div>
        <div class="position">
          <input class="input-cart-form" id="summ-cart" value="2000">
        </div>
      </div>
      <div class="id_position" id="46">
        <div class="position">
          <p>Композиция Космический</p>
        </div>
        <div class="position">
          <div class="input-number">
            <button type="button" class="input-cart-form input-number-down minus">-</button>
            <input class="qty" type="number" value="5" id="46" name="product-id46" min="1" max="50" step="1">
            <button type="button" class="input-number-up  plus">+</button>
          </div>
        </div>
        <div class="position">
          <input id="price" class="input-cart-form" value="5000">
        </div>
        <div class="position">
          <input class="input-cart-form" id="summ-cart" value="25000">
        </div>
      </div>
    </form>
  </div>
  <div class="name_value">
    <div class="position">
      <p>Итого</p>
    </div>
    <div class="position">
      <p>
        8
      </p>
    </div>
    <div class="position">
      <p> </p>
    </div>
    <div class="position">
      <p>31000</p>
    </div>
  </div>

</div>

<input type="button" name="update_cart" value="апдейт корзины"></input>

<script>
  $('body').on('click', 'button.plus, button.minus', function() {

    var qty = $(this).parent().find('input'),
      val = parseInt(qty.val()),
      min = parseInt(qty.attr('min')),
      max = parseInt(qty.attr('max')),
      step = parseInt(qty.attr('step'));

    // дальше меняем значение количества в зависимости от нажатия кнопки
    if ($(this).is('.plus')) {
      if (max && (max <= val)) {
        qty.val(max);
      } else {
        qty.val(val + step);
      }
    } else {
      if (min && (min >= val)) {
        qty.val(min);
      } else if (val > 1) {
        qty.val(val - step);
      }
    }

  });

  $('body').on('click', '[name="update_cart"]', function() {

    //взять данные из формы
    //var form = document.getElementById('form');
    var form = document.forms.namedItem("form");
    var formData = new FormData(form);

    //проверить в консоли
    for (var pair of formData.entries()) {
      console.log(pair[0] + ': ' + pair[1]);
    }

    //ajax
    //Создадим объект для отправки AJAX запроса
    var HttpRequest = new XMLHttpRequest();
    //Функция в которую возвращается ответ от сеовера
    HttpRequest.onload = function(e) {
      //Проверка что результат отчета успешный (может быть 404 или другие)
      if (this.status == 200) {
        alert('Успешно обновлен');
        //Записываем цифру в элемент корзины в верстке
        document.getElementById('chart-value').innerText = this.response;
      } else {
        alert('Ошибка');
      }
    };
    //Настройка запроса для отправки (второй параметр путь к PHP скрипту)
    HttpRequest.open("POST", '/cart/', true);
    //Отправка запроса на сервер
    HttpRequest.send(formData);


  });
</script>

如何用篮子覆盖数组？

我看不懂措辞

请求的模块“del”不提供名为“default”的导出

"!+tab" 在 HTML 的 vs 代码中不起作用

我正在尝试解决“猜词”的问题。Python

可以使用哪些命令将当前指针移动到指定的提交而不更改工作目录中的文件？

Python解析野莓

问题：“警告：检查最新版本的 pip 时出错。”

帮助编写一个用值填充变量的循环。解决这个问题

尽管依赖数组为空，但在渲染上调用了 2 次 useEffect

数据不通过 Telegram.WebApp.sendData 发送

如何用篮子覆盖数组？

1 个回答

相关问题