【问题标题】:How to delete comma separator in this array case?在这种数组情况下如何删除逗号分隔符?
【发布时间】:2017-09-11 09:49:07
【问题描述】:

所以,首先我有:

var tempArray = [];
tempArray.push(get);

在这种情况下,get 变量会抓取克隆 div 的 html。

我最后尝试过的:

tempArray.push(get);

var myJSONString = JSON.stringify(tempArray);

var parseString = $.parseJSON(myJSONString);

var finalString = myJSONString.replace(/\r?\\n/g, '').replace(/\\/g, '').replace(/^\[(.+)\]$/,'$1').replace (/(^")|("$)/g, '');

var joinString = tempArray.join(",");

然后:

// Save
localStorage.setItem('sessions', finalString);

我总是得到什么:

tempArray[div "," div]

我已将函数外的数组声明为:

var tempArray = [];

我在这里将内容推送到数组:

  // Decide to add or remove
  if(box.hasClass("selected")){
    console.log("Add to array")
    tempArray.push(get);

    // Add to favorites tab
    favoriteTab.append(boxContent);

  }

完整的 JS

console.clear();
//localStorage.setItem('sessions', "");

var tempArray = [];

// Clones
$('div.tab-pane').on('click', '.favorite', function(e) {
  e.preventDefault();

  // Elements we play with... Having significative variable names.
  var heartLink = $(this);
  var box = heartLink.parent('.box');
  var container = box.parent('.box-container');
  var favoriteTab = $("#fav .spaces");

  // I don't know what is the use for those 3 lines below.
  var idFind = box.attr("id");
  var idComplete = ('#' + idFind);
  console.log(idComplete);

  //TOGGLE FONT AWESOME ON CLICK
  heartLink.find('i').toggleClass('fa-heart fa-heart-o'); // .selected or not, you need those 2 classes to toggle.
  box.toggleClass("selected not-selected"); // Toggle selected and not-selected classes

  // Clone div
  var boxContent = container.clone(true, true);

  // Change the id
  var thisID = boxContent.attr("id")+"_cloned";
  boxContent.attr("id", thisID);

  // Get the html to be saved in localstorage
  var get = boxContent.wrap('<p>').parent().html();
  get = get.replace(/\r?\n/g, "").replace(/>\s*</g, "><"); // remove line feeds and spaces
  console.log(get);
  boxContent.unwrap();

  // Decide to add or remove
  if(box.hasClass("selected")){
    console.log("Add to array")
    tempArray.push(get);

    // Add to favorites tab
    favoriteTab.append(boxContent);

  }else{
    console.log("Remove from array");
    var index = tempArray.indexOf(get);
    tempArray.splice(index);

    // Remove from favorite tab
    favoriteTab.find("#"+thisID).remove();
  }

  // Save
  localStorage.setItem('sessions', tempArray);

});

// Append item if localstorage is detected
if (localStorage["sessions"]) {
  $("#fav .spaces").append(localStorage["sessions"]);
  console.log( localStorage.getItem('sessions') );
}

完整的html

<section id="speakers-programme">
  <div class="container">
    <div class="tabs_main">

      <div class="col-md-5"><a data-target="#mon" class="btn active" data-toggle="tab">Monday</a></div>
      <div class="col-md-5"><a data-target="#tue" class="btn active" data-toggle="tab">Tuesday</a></div>
      <div class="col-md-2"><a data-target="#fav" class="btn active" data-toggle="tab"><i class="fa fa-heart" aria-hidden="true"></i></a></div>

    </div>

    <div class="tab-content">
      <div class="tab-pane active" id="mon">
        <br>
        <div class="spaces">
          <div class="box-container">
            <div class="box not-selected" id="box1">
              <span>1</span>
              <a href="#" class="favorite"><i class="fa fa-heart-o" aria-hidden="true"></i></a>
            </div>
          </div>
          <div class="box-container">
            <div class="box not-selected" id="box2">
              <span>2</span>
              <a href="#" class="favorite"><i class="fa fa-heart-o" aria-hidden="true"></i></a>
            </div>
          </div>
        </div>
      </div>

      <div class="tab-pane active" id="tue">
        <br>
        <div class="spaces">
        </div>
      </div>

      <div class="tab-pane active" id="fav">
        <br>
        <div class="spaces">
        </div>
      </div>

    </div>
  </div>
</section>

小提琴:https://codepen.io/Bes7weB/pen/NvQQMN?editors=0011

因此,在此示例中,如果您单击“星期一”选项卡并单击两个心形,父 div 将被克隆到“收藏夹”选项卡,然后如果您刷新页面,您将看到两个 div 都带有中间的逗号。

感谢任何帮助,非常感谢!

【问题讨论】:

  • join 确实不影响数组。它返回一个新字符串。
  • 请发布您的问题中存在问题的特定代码,而不仅仅是指向它的链接。您在哪里以及如何使用 tempArray 以便它得到不需要的逗号?
  • 我已经更新了@Bergi的问题
  • 啊,你使用的是localStorage。问题是它不存储对象,它确实存储字符串 - 并且您的数组正在使用产生逗号分隔符的标准方法隐式地进行字符串化。您将需要明确地使用 JSON.stringifyJSON.parse
  • 好的,我明白了。我已经尝试过这种方式,但最后仍然有一个逗号要删除并且不知道该怎么做..你能告诉我这样做的方法吗?谢谢你。 @Bergi

标签: javascript jquery arrays comma separator


【解决方案1】:

你需要更新数组,看看下面的例子

let arr = [1, 2];
arr.join(' ');

console.log(arr);

arr = arr.join(' ');

console.log(arr);

【讨论】:

  • 感谢您的回复。这说得通。但是,将我的代码更改为 tempArray = tempArray.join(' ');它给了我一个错误,上面写着: tempArray.push 不是函数。你知道我为什么会收到这个错误吗?
  • 我勾选了你的答案是正确的,因为它让我看到了在这种情况下是如何工作的。但事实上,我还不能让它工作。你能看看吗? codepen.io/Bes7weB/pen/NvQQMN?editors=0011 因此,如果您单击“星期一”选项卡并单击两颗心,父 div 将被克隆到“收藏夹”选项卡,然后如果您刷新页面,您将在中间。请帮忙:) @marvel308
  • 我一会儿看看,你可以试试在codereview.stackexchange.com问,你可以找到他们的帮助
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2019-02-12
  • 2017-03-17
  • 1970-01-01
  • 2013-05-09
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多