jQuery.remove（）变得疯狂

时间：2015-12-26 22:42:13

标签： javascript jquery

我使用jQuery创建了一个简单的滑块而没有其他插件。

动画有效，但在删除第一张幻灯片（最后移动它）时，.remove()意外删除了所有幻灯片。

这是代码（代码段显示确切问题）：

＆＃13;
＆＃13; 
$(document).ready(function()
{
    var AnimateGallery = function(item)
    {
        $(item).animate({left: "-=1"}, 20, 'linear', function()
        {
            // I tried to debug, testing if $(item) caught all the slides,
            // but it doesn't.
            $(item).attr("data-off", $(item).offset().left + $(item).width());
            $(item).attr("data-out", Boolean($(item).offset().left + $(item).width() < 100).toString());

            if(parseFloat($(item).attr("data-off")) < 0)
            {
                $(item).remove();
                // ^^^^ This one unexpectedly removes all the slides when the first one meets condition
            }
            else
                AnimateGallery($(item));
        });
    };

    $(".mp-gallery")
        .find(".mp-gallery-item")
        .each(function()
    {
        var $el = $(this);

        AnimateGallery($el);
    });
});
＆＃13; 
div.mp-gallery
{
    position: relative;
    top: 10%;
    left: 0;

    border: 1px solid black;

    background-color: #333;

    height: 40%;
    width: 100%;

    font-size: 0;

    box-shadow: 0 0 20px black;

    white-space: nowrap;
}

div.mp-gallery-item
{
    display: inline-block;

    width: calc(100% / 3);

    margin: 0;
    padding: 0;

    vertical-align: middle;

    font-size: 12pt;

    position: relative;
}
div.mp-gallery-item
{
    height: 100px;
}
div.mp-gallery-item-image
{
    cursor: pointer;

    height: 100%;
}
div.mp-gallery-item-text
{
    padding: 2%;

    vertical-align: middle;
    text-align: center;

    position: relative;
    top: -50%;

    background-color: rgba(0, 0, 0, 0.2);

    opacity: 1;

    color: white;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mp-gallery">
            <div class="mp-gallery-item" id="slide-1">
                <div class="mp-gallery-item-image" style="background-color: burlywood;">

                </div>
                <div class="mp-gallery-item-text">
                    Image Text
                </div>
            </div>
            <div class="mp-gallery-item" id="slide-2">
                <div class="mp-gallery-item-image" style="background-color: darkgreen;">

                </div>
                <div class="mp-gallery-item-text">
                    Image Text
                </div>
            </div>
            <div class="mp-gallery-item" id="slide-3">
                <div class="mp-gallery-item-image" style="background-color: darkseagreen;">

                </div>
                <div class="mp-gallery-item-text">
                    Image Text
                </div>
            </div>
            <div class="mp-gallery-item" id="slide-4">
                <div class="mp-gallery-item-image" style="background-color: cadetblue;">

                </div>
                <div class="mp-gallery-item-text">
                    Image Text
                </div>
            </div>
            <div class="mp-gallery-item" id="slide-5">
                <div class="mp-gallery-item-image" style="background-color: coral;">

                </div>
                <div class="mp-gallery-item-text">
                   Image Text
                </div>
            </div>
            <div class="mp-gallery-item" id="slide-6">
                <div class="mp-gallery-item-image" style="background-color: gainsboro;">

                </div>
                <div class="mp-gallery-item-text">
                    Image Text
                </div>
            </div>
        </div>
＆＃13;
＆＃13;
＆＃13;

我不知道为什么会发生这种情况，我只想删除第一张幻灯片，将克隆的一张贴在最后，并在条件（符合左边距）触发时循环播放。

我正在使用jQuery 2.1.4

1 个答案:

答案 0 :(得分：2)

所有项目似乎同时被移除的原因是由于项目在他们的左兄弟被移除时向左移动。这会将每个项目一个接一个地移动到0，从而触发删除方法。

一种解决方案是绝对定位物品。

$(document).ready(function() {
  var AnimateGallery = function(item) {
    $(item).animate({
      left: "-=1"
    }, 20, 'linear', function() {
      $(item).attr("data-off", $(item).offset().left + $(item).width());
      $(item).attr("data-out", Boolean($(item).offset().left + $(item).width() < 100).toString());
      if (parseFloat($(item).attr("data-off")) < 0) {
        $(item).remove();
      } else
        AnimateGallery($(item));
    });
  };

  $(".mp-gallery")
    .find(".mp-gallery-item")
    .each(function(index) {
      var $el = $(this);
      $el.css("left", $el.width() * index); /* Added this */
      AnimateGallery($el);
    });
});
div.mp-gallery {
  position: relative;
  top: 10%;
  left: 0;
  border: 1px solid black;
  background-color: #333;
  height: 40%;
  width: 100%;
  font-size: 0;
  box-shadow: 0 0 20px black;
  white-space: nowrap;
}

div.mp-gallery-item {
  display: inline-block;
  width: calc(100% / 3);
  margin: 0;
  padding: 0;
  vertical-align: middle;
  font-size: 12pt;
  position: absolute; /* Changed this */
}

div.mp-gallery-item {
  height: 100px;
}

div.mp-gallery-item-image {
  cursor: pointer;
  height: 100%;
}

div.mp-gallery-item-text {
  padding: 2%;
  vertical-align: middle;
  text-align: center;
  position: relative;
  top: -50%;
  background-color: rgba(0, 0, 0, 0.2);
  opacity: 1;
  color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mp-gallery">
            <div class="mp-gallery-item" id="slide-1">
                <div class="mp-gallery-item-image" style="background-color: burlywood;">

                </div>
                <div class="mp-gallery-item-text">
                    Image Text
                </div>
            </div>
            <div class="mp-gallery-item" id="slide-2">
                <div class="mp-gallery-item-image" style="background-color: darkgreen;">

                </div>
                <div class="mp-gallery-item-text">
                    Image Text
                </div>
            </div>
            <div class="mp-gallery-item" id="slide-3">
                <div class="mp-gallery-item-image" style="background-color: darkseagreen;">

                </div>
                <div class="mp-gallery-item-text">
                    Image Text
                </div>
            </div>
            <div class="mp-gallery-item" id="slide-4">
                <div class="mp-gallery-item-image" style="background-color: cadetblue;">

                </div>
                <div class="mp-gallery-item-text">
                    Image Text
                </div>
            </div>
            <div class="mp-gallery-item" id="slide-5">
                <div class="mp-gallery-item-image" style="background-color: coral;">

                </div>
                <div class="mp-gallery-item-text">
                   Image Text
                </div>
            </div>
            <div class="mp-gallery-item" id="slide-6">
                <div class="mp-gallery-item-image" style="background-color: gainsboro;">

                </div>
                <div class="mp-gallery-item-text">
                    Image Text
                </div>
            </div>
        </div>

相关问题
最新问题