使用jQuery增加进度条

Question

我希望使用jQuery和JavaScript增加或减少元素的宽度作为进度条。我是JavaScript新手，我的代码中缺少一些工作。

任何人都可以帮我这个工作吗？提前谢谢！

$ gulp

$(document).ready(function(){
 var 
    width1 = $("#bar-one").width(),   
    width2 = $("#bar-two").width();
    
	$("#one").on("click", function(){
    $('#bar-one').css('width', width1 + '5%'),
    $('#bar-two').css('width', width2 - '5%');
	} else {
  	$('#bar-one').css('width', width1 - '5%'),
    $('#bar-two').css('width', width2 + '5%');
  });
  
  $("#two").on("click", function(){
    $('#bar-one').css('width', width1 + '10%'),
    $('#bar-two').css('width', width2 - '5%');
	} else {
  	$('#bar-one').css('width', width1 - '10%'),
    $('#bar-two').css('width', width2 + '5%');
  });
  
  $("#three").on("click", function(){
    $('#bar-one').css('width', width1 + '05%'),
    $('#bar-two').css('width', width2 - '15%');
	} else {
  	$('#bar-one').css('width', width1 - '5%'),
    $('#bar-two').css('width', width2 + '15%');
  });
})

.progress {
  width: 100%;
  height: 30px;
  background-color: silver;
}

#bar-one {
  background-color: blue;
  height: 30px;
}

#bar-two {
  background-color: red;
  height: 30px;
}

Answer 1

试用此代码

由于{"data: [{"all_cats": {"cat1": 1}, {"cat2": 2}, {"cat3": 3}}, "name": a}, {"all_cats": {"cat1": 4}, {"cat2": 5}, {"cat3": 6}}, "name": b}, {"all_cats": {"cat1": 7}, {"cat2": 8}, {"cat3": 8}}, "name": c}]} 没有else条件而导致错误

if

$(document).ready(function(){
 var width1 = $("#bar-one")[0].style.width.replace('%', '');  
  var width2 = $("#bar-two")[0].style.width.replace('%', '');

	$("#one").on("click", function(){
		if($(this).is(':checked')){
 var width1 = $("#bar-one")[0].style.width.replace('%', '');  
  var width2 = $("#bar-two")[0].style.width.replace('%', '');
		$('#bar-one').width((parseInt(width1)+5)+"%");
		$('#bar-two').width((parseInt(width2)-5)+"%");
		} else {
 var width1 = $("#bar-one")[0].style.width.replace('%', '');  
  var width2 = $("#bar-two")[0].style.width.replace('%', '');
		$('#bar-one').width((parseInt(width1)-5)+"%");
		$('#bar-two').width((parseInt(width2)+5)+"%");
		}
	});
  
  $("#two").on("click", function(){
	  if($(this).is(':checked')){
     var width1 = $("#bar-one")[0].style.width.replace('%', '');  
  var width2 = $("#bar-two")[0].style.width.replace('%', '');
    $('#bar-one').width((parseInt(width1) + 10)+"%");
    $('#bar-two').width((parseInt(width2)-5)+"%");
	} else {
   var width1 = $("#bar-one")[0].style.width.replace('%', '');  
  var width2 = $("#bar-two")[0].style.width.replace('%', '');
  	$('#bar-one').width((parseInt(width1) - 10)+"%");
    $('#bar-two').width((parseInt(width2)+5)+"%");
}
  });
  
  $("#three").on("click", function(){
	  if($(this).is(':checked')){
     var width1 = $("#bar-one")[0].style.width.replace('%', '');  
  var width2 = $("#bar-two")[0].style.width.replace('%', '');
    $('#bar-one').width((parseInt(width1)+5)+"%");
    $('#bar-two').width((parseInt(width2) - 15)+"%");
	} else {
   var width1 = $("#bar-one")[0].style.width.replace('%', '');  
  var width2 = $("#bar-two")[0].style.width.replace('%', '');
  	$('#bar-one').width((parseInt(width1)-5)+"%");
    $('#bar-two').width((parseInt(width2) + 15)+"%");
}
  });
  
});

.progress {
  width: 100%;
  height: 30px;
  background-color: silver;
}

#bar-one {
  background-color: blue;
  height: 30px;
  transition: width .6s linear
}

#bar-two {
  background-color: red;
  height: 30px;
  transition: width .6s linear
}