为什么每次单击都会重新初始化数组

why the array reinitialized on every click?

本文关键字：初始化 数组 单击 为什么      更新时间：2023-09-26

我试图将一些数字推送到一个数组中，然后我想将该数组分配给一个隐藏的输入，以便与表单一起发布。

每次单击时，我都会向数组中推送一个值，但每次单击时数组似乎都会重新初始化，因此它只存储上次推送的值。

完整场景：

  • 打开一个包含表单（由ajax加载的表单）的弹出模式
  • 选择一个类别，那么ajax也会加载类别项。（下面的共享代码在本页中）
  • 单击一个条目，通过ajax获取完整的条目详细信息，并将它们加载到div中，然后将条目ID推送到数组中
  • 存储所选项目ID的数组将被分配给隐藏的输入元素

因此，如果用户选择另一个类别，项目页面将被重新加载，这就是每次重新初始化数组的原因。

$(document).ready(function(){
            var added_items = [];
            $('.items-list .one-item').click(function(e){
                e.preventDefault();
                if(added_items.indexOf($(this).attr('href')) < 0){
                    ajaxLoad('<?=Yii::$app->urlManager->createUrl('bookings/item'); ?>', $('.added-items'), {item:$(this).attr('href')}, true);
                    added_items.push($(this).attr('href'));
                    $('#added-items-list').val(JSON.stringify(added_items));
                }
                else{
                    alert("item already exist");
                }
            });
        });

那么我如何保存项目ID并将其与表单一起发布。

的三个可能原因

1.）form重新加载页面

2） 。if(added_items.indexOf($(this).attr("href")) < 0)返回false

3） 。具有$(this).attr("href")的单个.one-item元件，参见2）

利用localStorage；注意，未经测试的

$(document).ready(function() {
  var added_items = localStorage.getItem("items") || [] ;
  $('.items-list .one-item').click(function(e) {
    e.preventDefault();
    if (typeof added_items === "string") {
      added_items = JSON.parse(added_items);
    }
    if (added_items.indexOf($(this).attr('href')) < 0) {
      added_items.push($(this).attr('href'));
      localStorage.setItem("items", JSON.stringify(added_items));
      // note, not certain if page reloads here ?
      // should $('#added-items-list').val(localStorage.getItem("items"));
      // be called before `ajaxLoad` ?
      ajaxLoad('<?=Yii::$app->urlManager->createUrl('
        bookings / item '); ?>', $('.added-items'), {
          item: $(this).attr('href')
        }, true);          
      $('#added-items-list').val(localStorage.getItem("items"));
    } else {
      alert("item already exist");
    }
  });
});

您的代码：

$(document).ready(function(){
    var added_items = [];
    ...
}

似乎位于ajax加载的内容中，因此此代码运行每个ajax调用。您应该至少将var added_items = [];移动到ajax重新加载的内容之外。

我做了什么（测试并成功工作）：

表单页面：

$(document).ready(function(){
    localStorage.clear();
    ...
    $('form').on('submit', function(){
        $('#added-items-list').val(JSON.stringify(localStorage["added_items"]));
    });
});

项目页面：

$(document).ready(function(){
    var added_items = [];
    if(localStorage.getItem("added_items")===null){
        localStorage["added_items"] = JSON.stringify(added_items);
    }
    else {
        // Parse the serialized data back into an array of objects
        added_items = JSON.parse(localStorage.getItem('added_items'));
    }
    $('.items-list .one-item').click(function(e){
        e.preventDefault();
        if(added_items.indexOf($(this).attr('href')) < 0){
            added_items.push($(this).attr('href'));
            localStorage.setItem('added_items', JSON.stringify(added_items));
        }
    else{
        alert("item already exist");
    }
});
相关文章：