重复数组值被推入新数组

Question

var filed_video = [];
var videoarr = [{
  name: 'Japchae: 잡채 (Glass noodles stir-fried with vegetables)',
  date: '4 Nov 2014',
  img: 'https://www.maangchi.com/wp-content/uploads/2007/07/japchae_plate.jpg',
  YoutubeId: 'i1djfV9uigc',
  FullRecipeUrl: 'https://www.maangchi.com/recipe/japchae',
  description: 'Japchae, sweet potato starch noodles stir fried with vegetables and meat, is one of Korea’s best-loved dishes, and one of the most popular on my website as well.Stir frying each ingredient separately seems like a lot of labor, but each one requires a different cooking time and a bit of care, and keeping the color and freshness of each ingredient intact makes for a stunning final presentation.'
},
{
  name: 'Hot and spicy rice cake',
  date: '30 Jan 2013',
  img: 'https://www.maangchi.com/wp-content/uploads/2007/09/ddeokbokki_sizzlingpot.jpg',
  YoutubeId: 'TA3Uo3a9674',
  FullRecipeUrl: 'https://www.maangchi.com/recipe/tteokbokki',
  description: 'When I lived in Korea I learned the secret to making good tteokbokki from a famous place in a market. It was run by an old lady who could always be found stirring her tteokbokki. People were lined up to buy it.'
}
];

var videoIndex = 0;
function createVideoList() {
  var list = "";
  var v = 0;
  $.each(videoarr, function (index, value) {
    var name = videoarr[v].name;
    var img = videoarr[v].img;
    list = list + "<div id='video'><a href='#'><img src='" + img + "' id='videoimg'/><h4>" + name + 
 "</h4></a></div>"
    v = v + 1;
  });
  $('#videoresult').html(list);
}

  $(document).on("pagebeforeshow", "#videopage", function () {
  createVideoList();

  displayLikedVideo();
})


$(document).on('pageshow', '#videopage', function () {
  $('#saved_video').on('tap', function () {
    filed_video.push(videoarr[videoIndex]);
    console.log(filed_video);
  });
})

function displayLikedVideo() {
  var liked = "";
  var i = 0;
  $.each(filed_video, function (index, value) {
    var name = filed_video[i].name;
    var img = filed_video[i].img;
    liked = liked + "<div id='video'><a href='#'><img src='" + img + "' id='videoimg'/><h4>" + name 
   + "</h4></a></div>"
    i = i + 1;
  });
  $('#liked_video').html(liked);
}

我第一次点击保存的按钮时，它将数组值一次推送到新数组中。但是，如果我尝试保存其他数组值。它将两次推送到新数组enter image description here中。.到目前为止，如果我尝试保存第3个数组值，将它推送3次到新数组。对不起，我的解释不好。。。有人知道原因吗？

Answer 1

您是否要在数组中一一推送值？意思是第一次点击，插入第一项，第二次点击插入第二项？如果是这样，则您尚未递增videoIndex，因此它仅推送第一项。在这种情况下，您需要增加videoIndex：

$(document).on('pageshow', '#videopage', function () {
  $('#saved_video').on('tap', function () {
    filed_video.push(videoarr[videoIndex]);
    console.log(filed_video);
    videoIndex=videoIndex+1;
  });
})

如果您想每次都重置阵列并插入新项目，则问题出在全局声明var filed_video = [];上。从顶部将其删除，然后将其包含在您的操作中。

$(document).on('pageshow', '#videopage', function () {
  $('#saved_video').on('tap', function () {
    var filed_video = [];
    filed_video.push(videoarr[videoIndex]);
    console.log(filed_video);
  });
})

编辑

var filed_video = [];
var videoarr = [{
  name: 'Japchae: 잡채 (Glass noodles stir-fried with vegetables)',
  date: '4 Nov 2014',
  img: 'https://www.maangchi.com/wp-content/uploads/2007/07/japchae_plate.jpg',
  YoutubeId: 'i1djfV9uigc',
  FullRecipeUrl: 'https://www.maangchi.com/recipe/japchae',
  description: 'Japchae, sweet potato starch noodles stir fried with vegetables and meat, is one of Korea’s best-loved dishes, and one of the most popular on my website as well.Stir frying each ingredient separately seems like a lot of labor, but each one requires a different cooking time and a bit of care, and keeping the color and freshness of each ingredient intact makes for a stunning final presentation.'
},
{
  name: 'Hot and spicy rice cake',
  date: '30 Jan 2013',
  img: 'https://www.maangchi.com/wp-content/uploads/2007/09/ddeokbokki_sizzlingpot.jpg',
  YoutubeId: 'TA3Uo3a9674',
  FullRecipeUrl: 'https://www.maangchi.com/recipe/tteokbokki',
  description: 'When I lived in Korea I learned the secret to making good tteokbokki from a famous place in a market. It was run by an old lady who could always be found stirring her tteokbokki. People were lined up to buy it.'
}
];

var videoIndex = 0;
function createVideoList() {
  var list = "";
  var v = 0;
  $.each(videoarr, function (index, value) {
    var name = videoarr[v].name;
    var img = videoarr[v].img;
    list = list + "<div id='video'><a href='#'><img src='" + img + "' id='videoimg'/><h4>" + name + 
 "</h4></a></div>"
    v = v + 1;
  });
  $('#videoresult').html(list);
}
function displayLikedVideo() {
  var liked = "";
  var i = 0;
  $.each(filed_video, function (index, value) {
    var name = filed_video[i].name;
    var img = filed_video[i].img;
    liked = liked + "<div id='video'><a href='#'><img src='" + img + "' id='videoimg'/><h4>" + name 
   + "</h4></a></div>"
    i = i + 1;
  });
  $('#liked_video').html(liked);
}
$(function(){
$('#saved_video').on('click', function () {
    filed_video.push(videoarr[videoIndex]);
    console.log(filed_video);
    videoIndex=videoIndex+1;
  });
  createVideoList();

  displayLikedVideo();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div data-role="page" id="videopage">
     <div data-position="fixed" data-tap-toggle="false" id="videoheader">
     <h2 id="recipeHeader">Recipe Video</h2>
      <p>Upload Video</p>
     <a href="#mypanel" id="myLiked">Liked</a>

     <div class="wrap no">
       <div class="search">
         <input type="search" name="search" class="searchTerm" data- 
            role="none" placeholder="Recipe video name">
         <button class="searchButton" data-role="none">
        <i class="fa fa-search"></i>
         </button>
        </div>
       </div>
     </div>
     <div data-role="main" class="ui-content" data-filter="true" data- 
     input="#filterTable-input" class="ui-responsive">
      <ul data-role="listview" id="videoresult">
      </ul>
      <div data-role="panel" id='mypanel' data-position="right" data- 
      display="overlay">
        <h4>The Favourite Recipe</h4>
        <ul data-role="listview" id="liked_video">
        </ul>
      </div>
    </div>

  </div>
    <!-- end of videopage -->

   <!-- start of videodetailpage -->
  <div data-role="page" id="videodetailpage">
    <div data-position="fixed" data-tap-toggle="false">
      <a href="#" data-rel='back' data-role="none" id="back"><i class="fa 
      fa-chevron-left"></i></a>
      <a id="saved_video">Like This 
      </a>
   </div>

    <div data-role="main" class="ui-content">
     <div id='youtubeVideo'></div>
     <h4 id='name'></h4>
     <p id="date"></p>
     <div id='desc'></div>
    </div>

  </div>