Question

我有使用bootstrap的进度条，这是html：

＆＃13;

$(".progress-bar").animate({
  width: $(this).data('width') + '%'
}, 2500);

＆＃13;

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<div class="alert alert-success">
  <div class="skill-name">ON PROGRESS 357/487</div>
  <div class="progress">
    <div class="progress-bar progress-bar-primary" role="progressbar" data-width="70">
    </div>
  </div>
</div>

＆＃13;

如果使用$(this).data('width') + '%'，上面的jquery无法正常工作。但如果我使用$(".progress-bar").data('width') + '%'工作。？感谢

修改

如果我使用$(".progress-bar").data('width') + '%'它会更改所有.progress-bar。

Answer 1

您正在处理范围问题。 .animate()方法仅在其this回调中范围complete。否则，它可能会将其限定给调用者。

要解决此问题，请将您的选择缓存在变量中，并在其余代码中使用它。除了始终保持正确的范围外，这在技术上更快，因为它不需要在jQuery对象中重新包装this。

var progressBar = $(".progress-bar");
progressBar.animate({
  width: progressBar.data('width') + '%'
}, 2500);

如果您正在处理多个进度条，则可以使用.each()对它们进行迭代，并将动画应用于每个元素，同时它们仍在范围内。

$(".progress-bar").each(function(i, item) {
  var progressBar = $(item); // $(this) would work too
  progressBar.animate({
    width: progressBar.data('width') + '%'
  }, 2500);
});

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<div class="alert alert-success">
  <div class="skill-name">ON PROGRESS 357/487</div>
  <div class="progress">
    <div class="progress-bar progress-bar-primary" role="progressbar" data-width="70">
    </div>
  </div>
</div>

为什么不能在jquery .animate（）中使用$（this）？

1 个答案: