JavaScript 的步骤过程不会改变颜色
step process with JavaScript doesn't change colors
我正在尝试使用 JavaScript 进行步骤处理。
我希望它到达第 3 步时,颜色变为另一种颜色。
我尝试了很多,但我没有成功。
描绘步骤流程的工作原理
想象一下我希望它如何工作
$(document).ready(function() {
var i = 1;
var id = setInterval(steps, 700);
function steps() {
if (i == 4) {
clearInterval(id);
} else {
$(".step" + i).css('background-color', 'rgb(134 209 109)');
i++;
}
}
$(".btn-next").on("click", function() {
$('.page-1').fadeOut(1000, function() {
$('.page-2').fadeIn(1000);
});
var interval = setInterval(slide, 1200)
d = 1;
function slide() {
if (d == 6) {
clearInterval(interval);
$('.btn-next-two').fadeIn();
$('.search').fadeOut();
} else {
$(".ship-" + d).addClass('slide-in-left');
$(".ship-" + d).css('display', 'block');
d++;
}
}
});
$(".btn-next-two").on("click", function() {
$('.page-2').fadeOut(1000, function() {
$('.page-3').fadeIn(1000);
});
});
$('.btn-delivery').on('click', function() {
$('.page-3').fadeOut(1000, function() {
$('.page-4').fadeIn(1000);
});
});
$('.btn-time').on('click', function() {
$('.page-4').fadeOut(1000, function() {
$('.page-5').fadeIn(1000);
});
});
});
step {
min-height: 20px;
margin-right: 2px;
border-radius: 14px;
background-color: #a9b7b9;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-2 col-sm-1 offset-2 offset-sm-4 step1 step">
</div>
<div class="col-2 col-sm-1 step2 step">
</div>
<div class="col-2 col-sm-1 step3 step">
</div>
<div class="col-2 col-sm-1 step4 step">
您的 javascript 代码中存在一个小问题。
我更新了函数步骤。
function steps(){
if(i == 5){
clearInterval(id);
}
else if(i == 3) {
$(".step"+i).css('background-color','red');
i++;
}
else{
$(".step"+i).css('background-color','rgb(134 209 109)');
i++;
}
}
这是完整的代码。
$(document).ready(function(){
var i = 1;
var id = setInterval(steps,700);
function steps(){
if(i == 5){
clearInterval(id);
}
else if(i == 3) {
$(".step"+i).css('background-color','red');
i++;
}
else{
$(".step"+i).css('background-color','rgb(134 209 109)');
i++;
}
}
$( ".btn-next" ).on( "click", function() {
$('.page-1').fadeOut(1000, function(){
$('.page-2').fadeIn(1000);
});
var interval = setInterval(slide,1200)
d = 1;
function slide(){
if(d == 6){
clearInterval(interval);
$('.btn-next-two').fadeIn();
$('.search').fadeOut();
}
else{
$(".ship-"+d).addClass('slide-in-left');
$(".ship-"+d).css('display','block');
d++;
}
}
});
$( ".btn-next-two" ).on( "click", function() {
$('.page-2').fadeOut(1000, function(){
$('.page-3').fadeIn(1000);
});
});
$('.btn-delivery').on('click',function(){
$('.page-3').fadeOut(1000, function(){
$('.page-4').fadeIn(1000);
});});
$('.btn-time').on('click',function(){
$('.page-4').fadeOut(1000, function(){
$('.page-5').fadeIn(1000);
});});
});
.step{
min-height:20px;
margin-right:2px;
border-radius:14px;
background-color:#a9b7b9;
}
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<div class="col-2 col-sm-1 offset-2 offset-sm-4 step1 step">
</div>
<div class="col-2 col-sm-1 step2 step">
</div>
<div class="col-2 col-sm-1 step3 step">
</div>
<div class="col-2 col-sm-1 step4 step">
</body>
</html>
就放
else if(i == 3){
$(".step"+i).css('background-color','red');
i++;
}
有条件。
我正在尝试使用 JavaScript 进行步骤处理。 我希望它到达第 3 步时,颜色变为另一种颜色。 我尝试了很多,但我没有成功。
描绘步骤流程的工作原理
想象一下我希望它如何工作
$(document).ready(function() {
var i = 1;
var id = setInterval(steps, 700);
function steps() {
if (i == 4) {
clearInterval(id);
} else {
$(".step" + i).css('background-color', 'rgb(134 209 109)');
i++;
}
}
$(".btn-next").on("click", function() {
$('.page-1').fadeOut(1000, function() {
$('.page-2').fadeIn(1000);
});
var interval = setInterval(slide, 1200)
d = 1;
function slide() {
if (d == 6) {
clearInterval(interval);
$('.btn-next-two').fadeIn();
$('.search').fadeOut();
} else {
$(".ship-" + d).addClass('slide-in-left');
$(".ship-" + d).css('display', 'block');
d++;
}
}
});
$(".btn-next-two").on("click", function() {
$('.page-2').fadeOut(1000, function() {
$('.page-3').fadeIn(1000);
});
});
$('.btn-delivery').on('click', function() {
$('.page-3').fadeOut(1000, function() {
$('.page-4').fadeIn(1000);
});
});
$('.btn-time').on('click', function() {
$('.page-4').fadeOut(1000, function() {
$('.page-5').fadeIn(1000);
});
});
});
step {
min-height: 20px;
margin-right: 2px;
border-radius: 14px;
background-color: #a9b7b9;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-2 col-sm-1 offset-2 offset-sm-4 step1 step">
</div>
<div class="col-2 col-sm-1 step2 step">
</div>
<div class="col-2 col-sm-1 step3 step">
</div>
<div class="col-2 col-sm-1 step4 step">
您的 javascript 代码中存在一个小问题。
我更新了函数步骤。
function steps(){
if(i == 5){
clearInterval(id);
}
else if(i == 3) {
$(".step"+i).css('background-color','red');
i++;
}
else{
$(".step"+i).css('background-color','rgb(134 209 109)');
i++;
}
}
这是完整的代码。
$(document).ready(function(){
var i = 1;
var id = setInterval(steps,700);
function steps(){
if(i == 5){
clearInterval(id);
}
else if(i == 3) {
$(".step"+i).css('background-color','red');
i++;
}
else{
$(".step"+i).css('background-color','rgb(134 209 109)');
i++;
}
}
$( ".btn-next" ).on( "click", function() {
$('.page-1').fadeOut(1000, function(){
$('.page-2').fadeIn(1000);
});
var interval = setInterval(slide,1200)
d = 1;
function slide(){
if(d == 6){
clearInterval(interval);
$('.btn-next-two').fadeIn();
$('.search').fadeOut();
}
else{
$(".ship-"+d).addClass('slide-in-left');
$(".ship-"+d).css('display','block');
d++;
}
}
});
$( ".btn-next-two" ).on( "click", function() {
$('.page-2').fadeOut(1000, function(){
$('.page-3').fadeIn(1000);
});
});
$('.btn-delivery').on('click',function(){
$('.page-3').fadeOut(1000, function(){
$('.page-4').fadeIn(1000);
});});
$('.btn-time').on('click',function(){
$('.page-4').fadeOut(1000, function(){
$('.page-5').fadeIn(1000);
});});
});
.step{
min-height:20px;
margin-right:2px;
border-radius:14px;
background-color:#a9b7b9;
}
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<div class="col-2 col-sm-1 offset-2 offset-sm-4 step1 step">
</div>
<div class="col-2 col-sm-1 step2 step">
</div>
<div class="col-2 col-sm-1 step3 step">
</div>
<div class="col-2 col-sm-1 step4 step">
</body>
</html>
就放
else if(i == 3){
$(".step"+i).css('background-color','red');
i++;
}
有条件。