jQuery - 使用动态类

Question

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

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

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

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

但那不起作用。在第一次点击时，它正在运行，但之后它会滚动到一个没有.vp类的元素。

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

＆＃13;

＆＃13;

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);
  
});

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

像这样改变你的功能

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

＆＃13;

＆＃13;

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);
  
});

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;