Question

我已经看了几年这个网站，但现在才遇到一个通过阅读其他人的答案无法解决的问题。

我觉得我的问题很难克服，但我出于某种原因对其进行了阻止。

我有一个添加和删除幻灯片的“滑动”滑块，将来我希望这样做，以便第一张幻灯片是一个不可删除的上传表单。然后，每次上传都会生成一张新幻灯片。删除该上传将删除该特定幻灯片。

我的第一个问题是，我不确定如何让第一张幻灯片无法取消...如果挂在这个问题意味着我将无法解决创建上面提到的问题，可能会有<咳嗽咳嗽付钱给那些可以把它拉下来的人。（对不起，如果违反规则那么说）

这是我的代码，希望这就是你所需要的：

$(document).ready(function() {

  $('.add-remove').slick({
      dots: true,
      slidesToShow: 1,
      speed: 500,
      slidesToScroll: 1
  });
  var slideIndex = 1;
  $('.js-add-slide').on('click', function() {
      slideIndex++;
      $('.add-remove').slick('slickAdd','<div><h3>' + slideIndex + '</h3></div>');
  });

  $('.js-remove-slide').on('click', function() {
      $('.add-remove').slick('slickRemove', slideIndex - 1);
      if (slideIndex !== 0){
          slideIndex--;
      }
  });

});

Answer 1

您所谓的slideIndex不是索引，而是幻灯片的数量。这意味着您总是删除最后一张幻灯片。 slideCount将是一个更合适的名称。要限制删除并只删除活动元素，您可以执行以下操作：

var slideCount = 0, slideSequence = 0;

$('.js-remove-slide').on('click', function() {
    var slideIndex = $('.slick-slide.slick-active').data('slick-index');
    if (slideIndex != 0){
        $('.add-remove').slick('slickRemove', slideIndex);
        slideCount--;
    }
});

$('.js-add-slide').on('click', function() {
    slideCount++;
    $('.add-remove').slick('slickAdd','<div><h3>' + slideSequence + '</h3></div>');
    slideSequence++;
});

添加最终会添加一张新幻灯片，这取决于slickAdd的实现，即使删除了某些内容，它也会始终获得下一个数字，以显示删除和创建内容的位置。

Answer 2

在这种情况下，我会检查切片的长度，只有在长度大于1时才会删除。

这样的事情应该有效

if ($(".slick-slide").length > 1) {
    // deletion code
}

Javascript滑块添加/删除不删除第一张幻灯片的功能

2 个答案: