删除后无法将项目重新添加到购物篮（数组）

Question

我的 PHP 表单中有一个篮子（一个数组），用户可以在其中添加他们选择的电影。 下图，可能更能说明情况：

问题： 如图所示，用户可以单击垃圾图像从列表中删除电影。现在的问题是，如果他/她想再次将这部电影重新添加到选定列表中，则会显示消息“这部电影已经在列表中”。，而它应该仅当电影现在不在列表中时才显示！

这是我的代码（form.php）：

<script type="text/javascript">
var master_basket = new Array();
var selectedMovies = {};

$(document).ready(function () {
/// SOME CODES UNRELATED TO MY QUESTION ....

 function get_index_of_item(movie_name) {
for (var i = 0; i < master_basket.length; i++) {
    if (master_basket[i].movie_name === movie_name){
        return i;
    }
 }
 return -1;
}

function addToBasket(item) {
   master_basket.push(item);
   showBasketObjects();
}

function showBasketObjects() {
   $("#basket_content").empty();
   $.each(master_basket, function(k,v) {
         var name_and_year = v.movie_name;
         console.log(v.movie_name);
         console.log(v.movie_year);          

         $("#basket_content").append("<div class='item_list'>" + v.movie_name + "<a class='remove_link' href='" + name_and_year + "'><img width='20' src='http://i61.tinypic.com/4n9tt.png'></a></div>");
   });

   $(".remove_link").on('click', function (e) {       
     var name_year = $(this).attr("href");
     console.log(name_year);

     var index = get_index_of_item(name_year[0]);
     console.log(index);

    if (index !== -1) {
     master_basket.splice(index, 1);
     console.log(master_basket);
     $(this).closest('.item_list').remove();
    } else {
           console.log("DEBUG: NO ITEM IN THE LIST");
    }
     return false;
  });
}

这是我的更新 searchfilm.php：

<?php
// QUERY DB
 while ($row = $query->fetch(PDO::FETCH_ASSOC)):
      ?> 
     <tr>
         <td><img class='imdbImage' id="image" src='imdbImage.php?url=<?php echo $row['posterLink']; ?>' alt="" /></td>

         <td><label id='year'><?php echo $row['year']; ?> </label></td>

         <td><a href="http://www.imdb.com/title/<?php echo urlencode($row['ImdbId']); ?>"><?php echo $row['movieName']; ?></a></td>

        <td><a href="javascript:addmovie('<?php echo $row['movieName'], "_", $row['year']; ?>')" class="add">Add to list</a></td>
     </tr> 
      <?php
       endwhile;
      ?>

<script type="text/javascript">
function addmovie(movieName) {       

    var obj = {
              "movie_name":movieName
              };

    var index = parent.window.opener.get_index_of_item(movieName);

         if(index === -1) {
                parent.window.opener.addToBasket(obj);  
         }  else {
                alert("This movie is already in the selected list");
         }
    }
 </script>

有人可以帮我解决一下吗？

Answer 1

您的.indexOf() 搜索正在寻找"The Matrix_1999" 的字符串，但篮子中没有字符串。它包含所有电影信息的对象。所以你的.indexOf() 正在返回-1。

您需要一个函数来根据您提供的名称和年份在篮子中搜索正确的对象。

此外，无需将姓名/年份作为属性添加到购物篮中。

var master_basket = new Array();

/*** This will receive the movie name/year, 
     and return the index or -1 if not found ***/
function get_index_of_item(movie_name, movie_year) {
    for (var i = 0; i < master_basket.length; i++) {
        if (master_basket[i].movie_name == movie_name &&
            master_basket[i].movie_year == movie_year {
            return i;
        }
    }
    return -1;
}

function addToBasket(item) {
   master_basket.push(item);
   showBasketObjects();
}

// We need to pass along the movie name and year so it can be used to
//  fetch the right index from the array.
function showBasketObjects() {
   $("#basket_content").empty();
   $.each(master_basket, function(k, v) {
         var name_and_year = v.movie_name + "_" + v.movie_year;

         $("#basket_content").append("<div class='item_list'>" + 
                                      v.movie_name + 
                                      "<a class='remove_link' href='" + 
                                      name_and_year + 
                                      "'><img width='20' src='http://i61.tinypic.com/4n9tt.png'></a></div>");
   });

 $(".remove_link").on('click', function (e) {
     // Split the `href` on the `_` character to get the name and year
     var name_year = $(this).attr("href").split("_");

     // The split gave us an Array. The name is at the first index,
     //  and the year is at the second
     var index = get_index_of_item(name_year[0], name_year[1]);

     // We check to see if it returned `-1`, and if not, we remove it
     if (index !== -1) {
         master_basket.splice(index, 1);
         console.log(master_basket);
         $(this).closest('.item_list').remove();
     } else {
         console.log("DEBUG: For some reason it was not in the list");
     }
     return false;
  });
}

---

// I think the `movieName` is getting `"The Matrix_1999"`, so split it on `"_"`
function addmovie(movieName) {
    var name_and_year = movieName.split("_");

    var obj = {
          "movie_name":name_and_year[0],
          "movie_year":name_and_year[1]
    };

    // Use the function to see if the item is already in the list
    var index = parent.window.opener.get_index_of_item(movieName, year);

    // If it returned `-1`, we can add it.
    if(index === -1) {
         parent.window.opener.addToBasket(obj); 
    } else {
         alert("This movie is already in the selected list");
    }
}