添加一个将 class 添加到 div 的计时器，然后删除 class 并将其添加到另一个 div

Question

I am creating a tutorial that explains in 4 steps how an application works.

Currently, clicking on one of the steps adds a class that changes the text and displays an additional image.

I would like this process to be automatic as well, and to trigger this action at each step, in sequence, after a few seconds.

I think I need to use a setTimeout() function, but I can't visualize how to go from one step to the other ( and ideally make a loop we the process arrives to the step 4 )

here is my code so that it is more understandable.

Thanks a lot for your help

 jQuery(".tutorial-point").click(function (e) { jQuery(".tutorial-point").removeClass("active-tuto"); jQuery(this).addClass("active-tuto"); }); jQuery('.tutorial-point').on('click', function (e) { e.preventDefault(); var imgSRC = jQuery(this).data('src'); jQuery('#imageFlowchart').html('<img src="' + imgSRC + '" alt="" />'); });

 .tutorial-container { background: #002832; display: flex; flex-direction:column; justify-content: space-around; max-width: 1200px; padding: 5rem 1rem; margin: auto; }.tutorial-text-block { max-width: 430px; }.tutorial-title { color: white; padding-bottom: 2rem; padding-top: 2rem; }.tutorial-point { cursor: pointer; color: #7384A7; padding: 10px; display: flex; }.tutorial-point:before { content: url("https://cdn.unitplus.eu/images/checkbox-blank-circle-line.svg"); padding-right: 12px; }.tutorial-img-block { align-self: center; }.active-tuto { color: white; display: flex; }.active-tuto:before { content: url("https://cdn.unitplus.eu/images/checkbox-circle-line.svg"); padding-right: 12px; }.tuto-img { height: 360px; width: 360px; }.tuto-img img { height: 360px; width: 360px; animation: fadeIn 1s; -webkit-animation: fadeIn 1s; -moz-animation: fadeIn 1s; -o-animation: fadeIn 1s; -ms-animation: fadeIn 1s; } @keyframes fadeIn { 0% {opacity:0;} 100% {opacity:1;} } @-moz-keyframes fadeIn { 0% {opacity:0;} 100% {opacity:1;} } @-webkit-keyframes fadeIn { 0% {opacity:0;} 100% {opacity:1;} } @-o-keyframes fadeIn { 0% {opacity:0;} 100% {opacity:1;} } @-ms-keyframes fadeIn { 0% {opacity:0;} 100% {opacity:1;} } #tutoImg { height: 360px; width: 360px; }.tutorial { margin-top: 6rem; width: 100%; background-color:#002832; }.tutorial.img-block { align-self: center; }.white-logo { background-image: url("https://cdn.unitplus.eu/images/checkbox-circle-line.svg"); }.black-logo { background-image: url("https://cdn.unitplus.eu/images/checkbox-blank-circle-line.svg"); }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="tutorial"> <div class="tutorial-container"> <div class="tutorial-text-block">Here is the tutorial</div> <div class="tutorial-paragraph-block"> <div class="active-tuto tutorial-point text-font-16" data-src="https://via.placeholder.com/150"> <div>Step 1</div> </div> <div class="tutorial-point text-font-16" data-src="https://via.placeholder.com/151"> <div>Step 2</div> </div> <div class="tutorial-point text-font-16" data-src="https://via.placeholder.com/152"> <div>Step 3</div> </div> <div class="tutorial-point text-font-16" data-src="https://via.placeholder.com/153"> <div>Step 4</div> </div> </div> </div> <div class="tutorial-img-block"> <div id="imageFlowchart" class="tuto-img"> <img src="https://via.placeholder.com/150" alt=""> </div> </div> </div> </div>

Answer 1

This might work, using trigger() function

const interval = setInterval(() => {
  const next = jQuery('.active-tuto').next('.tutorial-point');
  next.length > 0 ? next.trigger('click') : clearInterval(interval);
}, 3000);

It triggers click event on next step every 3 seconds till the last step.

 let interval; const auto = () => { if (interval) { clearInterval(interval); } interval = setInterval(() => { const next = jQuery('.active-tuto').next('.tutorial-point'); next.length > 0? next.trigger('click'): clearInterval(interval); }, 3000); }; auto(); jQuery(".tutorial-point").click(function (e) { jQuery(".tutorial-point").removeClass("active-tuto"); jQuery(this).addClass("active-tuto"); auto(); }); jQuery('.tutorial-point').on('click', function (e) { e.preventDefault(); var imgSRC = jQuery(this).data('src'); jQuery('#imageFlowchart').html('<img src="' + imgSRC + '" alt="" />'); });

 .tutorial-container { background: #002832; display: flex; flex-direction:column; justify-content: space-around; max-width: 1200px; padding: 5rem 1rem; margin: auto; }.tutorial-text-block { max-width: 430px; }.tutorial-title { color: white; padding-bottom: 2rem; padding-top: 2rem; }.tutorial-point { cursor: pointer; color: #7384A7; padding: 10px; display: flex; }.tutorial-point:before { content: url("https://cdn.unitplus.eu/images/checkbox-blank-circle-line.svg"); padding-right: 12px; }.tutorial-img-block { align-self: center; }.active-tuto { color: white; display: flex; }.active-tuto:before { content: url("https://cdn.unitplus.eu/images/checkbox-circle-line.svg"); padding-right: 12px; }.tuto-img { height: 360px; width: 360px; }.tuto-img img { height: 360px; width: 360px; animation: fadeIn 1s; -webkit-animation: fadeIn 1s; -moz-animation: fadeIn 1s; -o-animation: fadeIn 1s; -ms-animation: fadeIn 1s; } @keyframes fadeIn { 0% {opacity:0;} 100% {opacity:1;} } @-moz-keyframes fadeIn { 0% {opacity:0;} 100% {opacity:1;} } @-webkit-keyframes fadeIn { 0% {opacity:0;} 100% {opacity:1;} } @-o-keyframes fadeIn { 0% {opacity:0;} 100% {opacity:1;} } @-ms-keyframes fadeIn { 0% {opacity:0;} 100% {opacity:1;} } #tutoImg { height: 360px; width: 360px; }.tutorial { margin-top: 6rem; width: 100%; background-color:#002832; }.tutorial.img-block { align-self: center; }.white-logo { background-image: url("https://cdn.unitplus.eu/images/checkbox-circle-line.svg"); }.black-logo { background-image: url("https://cdn.unitplus.eu/images/checkbox-blank-circle-line.svg"); }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="tutorial"> <div class="tutorial-container"> <div class="tutorial-text-block">Here is the tutorial</div> <div class="tutorial-paragraph-block"> <div class="active-tuto tutorial-point text-font-16" data-src="https://via.placeholder.com/150"> <div>Step 1</div> </div> <div class="tutorial-point text-font-16" data-src="https://via.placeholder.com/151"> <div>Step 2</div> </div> <div class="tutorial-point text-font-16" data-src="https://via.placeholder.com/152"> <div>Step 3</div> </div> <div class="tutorial-point text-font-16" data-src="https://via.placeholder.com/153"> <div>Step 4</div> </div> </div> </div> <div class="tutorial-img-block"> <div id="imageFlowchart" class="tuto-img"> <img src="https://via.placeholder.com/150" alt=""> </div> </div> </div> </div>