jQuery - 使用动态类滚动到元素

Question

我想要做的是以下内容：当我单击一个元素时，它将所有子元素克隆到另一个div并滚动到我单击的div的克隆。

为此，我将一个类vp添加到单击对象的克隆中。 这很好。 然后我添加了这个以滚动到该元素：

var target = output.find(".vp");

$(".output").animate({
  scrollLeft: target.offset().left
}, 500);

但这不起作用。 在第一次单击时，它正在工作，但之后它滚动到一个没有类.vp的元素。

这是一个片段。 有谁知道我做错了什么？

 var output = $(".output div"); $(".wrapper div").click(function(){ var size = $(".wrapper div").length; output.css('width', size * 100 + 'vw'); var index = $(this).index() + 1; output.empty(); $(".wrapper div").each(function(){ $(this).removeClass("vp"); $(this).clone().appendTo(output); }); $(".output div div:nth-child(" + index + ")").addClass("vp"); setTimeout(function(){ var target = output.find(".vp"); $(".output").animate({ scrollLeft: target.offset().left }, 500); }, 10); }); 

 body{ width:100vw; overflow:hidden; margin:0;padding:0; } .wrapper{ height:100%; width:100vw; background:none; } .wrapper div{ float:left; height:100px; width:100px; background-color: #a0a0a0; margin:10px; cursor:pointer; } .output{ font-size:2em; height:200px; width:100vw; display:block; overflow-x:auto; overflow-y:hidden; } .output div{ height:200px; width:100vw; } .output div div{ position:relative; display:block; float:left; width:100vw; height:200px; } .vp{ background-color:#a0a0a0; left:0; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="wrapper"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> </div> <div class="output"> <div></div> </div> 

Answer 1

像这样改变你的功能

    $(".output").animate({
      scrollLeft: target.width() * (index-1)
    }, 500);

 var output = $(".output div"); $(".wrapper div").click(function(){ var size = $(".wrapper div").length; output.css('width', size * 100 + 'vw'); var index = $(this).index() + 1; output.empty(); $(".wrapper div").each(function(){ $(this).removeClass("vp"); $(this).clone().appendTo(output); }); $(".output div div:nth-child(" + index + ")").addClass("vp"); setTimeout(function(){ var target = output.find(".vp"); $(".output").animate({ scrollLeft: target.width() * (index-1) }, 500); }, 10); }); 

 body{ width:100vw; overflow:hidden; margin:0;padding:0; } .wrapper{ height:100%; width:100vw; background:none; } .wrapper div{ float:left; height:100px; width:100px; background-color: #a0a0a0; margin:10px; cursor:pointer; } .output{ font-size:2em; height:200px; width:100vw; display:block; overflow-x:auto; overflow-y:hidden; } .output div{ height:200px; width:100vw; } .output div div{ position:relative; display:block; float:left; width:100vw; height:200px; } .vp{ background-color:#a0a0a0; left:0; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="wrapper"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> </div> <div class="output"> <div></div> </div>