javascript - 动态 jQuery 进度条 - 单击事件不起作用

Question

我有一个工作 JSFiddle 我希望能够根据单击的按钮更改进度条的“填充”程度。当我单击所述按钮时，没有任何反应。

我(以前)添加了警报/日志以确保我的点击功能正确，并且由于这些警报/日志在单击按钮后起作用，我相信我只是在我试图移动进度条的方式。

$('.quarter').click(function(){
  $(this).parent().prev().children('span').css('width','25%');
  });
$('.half').click(function(){
  $(this).parent().prev().children('span').css('width','50%');
  });
$('.three-quarters').click(function(){
  $(this).parent().prev().children('span').css('width','75%');
  });
$('.full').click(function(){
  $(this).parent().prev().children('span').css('width','100%');
  });  

Answer 1

$(this) 可能不会返回您认为的结果。考虑到 $(this) 与代码本身所在的容器相关；考虑一下，如果您需要我详细说明，请发表评论。

David784 为您的代码提供了一个很好的解决方案。或者，考虑为进度条的移动部分提供一些标识符。例如，尽管以下内容可用于将进度条更改为 100%，

$('span').css('width', '100%');

如果有的话，您将更改代码中的每个 跨度。