Question

我正在尝试将图像和data-id属性从div的一个部分移动到div的占位符部分。我还希望能够在单击任一部分中的“删除”按钮时从阵列中拼接出这些对象。

主要是通过定位'data-id'属性，然后执行我想要的操作 - 但我遇到了一个错误。

$(document).ready(function() {

  var selections = [];
  var prodLength = 4;
  var arrayVal = "";

  $(".killThis").click(function() {
    killCount();
  });

  $("#products").on('click', '.add', function () {
    $(this).removeClass('add');
    $(this).addClass('removeTop');
    $(this).text("remove");
    $('.remove').show();
    arrayVal = ($(this).data('id'));   
    if (selections.length <= prodLength) {
      selections.push({src: $(this).parent().find('img').attr('src'),vid: $(this).data('id')});
    }
    addProd();
    console.table(selections);
  });

  $("#products").on('click', '.removeTop', function () {
    arrayVal = ($(this).data('id'));
    $(this).removeClass('removeTop');
    $(this).addClass('add');
    $(this).text("add");
    nukeProd();
    cleanArray();
    drawProds();
  });

  $('#placeholders').on('click', '.remove', function () {
    arrayVal = ($(this).data('id'));
    console.log(arrayVal);
    nukeProdReverse();
    cleanArray();
    tempClear();
    drawProds();
  })

  function drawProds() {
    var prods = $('#placeholders').find('.placeholder');
    for (var i = 0; i < prods.length; i++) {
      var prod = prods[i];
      var selection = selections[i];
      if ((selection != undefined)) {
        $(prod).find('img').attr('src', selection.src);
        $(prod).find('.remove').attr('data-id', selection.vid)
      } else {
        $(prod).find('img').attr({
          'src': 'https://i.imgur.com/D6MQP01.png'
        });
        $(prod).find('.remove').css('display', 'none');
      }
    }
  }

  function addProd() {
    drawProds();
  }

  function nukeProd() {
    $('.placeholder[data-id="' + arrayVal + '"]').find('img').attr({
      'src': 'https://i.imgur.com/D6MQP01.png'
    });
    $('.remove[data-id="' + arrayVal + '"]').attr('data-id', '');    
  }

  function cleanArray() {
    for(var i = 0; i < selections.length; i++) {
      if(selections[i].vid == arrayVal) {
        selections.splice(i, 1);
        break;
      }    
    }
    console.table(selections);
  }  

  function nukeProdReverse() {
    $('.placeholder[data-id="' + arrayVal + '"]').find('img').attr({
      'src': 'https://i.imgur.com/D6MQP01.png'
    });
    $('.remove[data-id="' + arrayVal + '"]').removeAttr('data-id');
    $('.removeTop[data-id="' + arrayVal + '"]').text("add");
    $('.removeTop[data-id="' + arrayVal + '"]').addClass('add');
    $('.removeTop[data-id="' + arrayVal + '"]').removeClass('removeTop');        
  }

  function tempClear() {
  $('.remove').removeAttr('data-id');
  }

  function killCount() {
    console.log(arrayVal);
  }

});

这是我一直在努力的JSFiddle。当我从顶行以任何顺序添加产品时，我可以使用顶行的删除按钮删除它们，没有问题。

然而，使用底行的'删除'按钮，如果我从右到左（第4，第3，第2，第1）开始，我只能将它们全部删除...如果我以任何其他顺序删除它们，例如，第三，滑入其位置的那个将无法正常工作。

我认为它与索引增量有关，但就我所知道如何做/凑齐而言，我对此已经走到了尽头。

使用按钮清除数组中的对象（jquery）

0 个答案: