添加一個將類添加到div的計時器，然后洗掉該類并將其添加到另一個div-有解無憂

我正在創建一個教程，分 4 個步驟解釋應用程式的作業原理。

目前，單擊其中一個步驟會添加一個更改文本并顯示附加影像的類。

我希望這個程序也是自動的，并在幾秒鐘后按順序在每個步驟觸發此操作。

我想我需要使用 setTimeout() 函式，但我無法想象如何從一個步驟到另一個步驟（理想情況下，我們將程序到達第 4 步）

這是我的代碼，以便更容易理解。

非常感謝你的幫助

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="添加一個將類添加到 div 的計時器，然后洗掉該類并將其添加到另一個 div" />');
});

.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>

uj5u.com熱心網友回復：

這可能作業，使用trigger()功能

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

它每 3 秒觸發一次下一步的點擊事件，直到最后一步。

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="添加一個將類添加到 div 的計時器，然后洗掉該類并將其添加到另一個 div" />');
});

.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>

轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/366039.html

標籤：javascript 查询

上一篇：PHP聯系表單-附件限制問題，附加欄位，發送后重置表單

下一篇：有沒有辦法在pythonFlask應用程式的后臺運行一個函式？