單擊此按鈕時，將類添加到特定的類

Question

我正在編寫我自己的網站，我正在使用jQuery。但我是jQuery的初學者，我有一個小問題。我有我的HTML文檔：

<ol class="steps"> 
      <li><span class="step">Het verkrijgen van uw wensen. </span><span class="stepText">In deze stap komen we tot een overeenstemming hoe de website eruit zal komen te zien. Dit zal te paard gaan met een of meerdere tekeningen, om een zo goed mogelijk beeld te krijgen van wat u wilt met uw website.</span> 
      </li> 
      <li><span class="step">De offerte. </span><span class="stepText">Hier krijgt u de offerte toegestuurd met alle bijkomende informatie.</span> 
      </li> 
</ol> 

（這是一個縮短版，我有6個<李>標籤，所以給他們不同階層不是一個很好的解決方案...）

我現在想要發生的事情是，例如第一個span（class = step）被點擊，它旁邊的span（class = stepText）必須有一個新的類。這是我的jQuery代碼：

$(document).ready(function() { 
    $(".step").click(function() { 

     $(this).find($(".stepText"))addClass(".stepTextV"); 
     $(this).find($(".stepTextV"))removeClass(".stepText"); 

      // what I tried before: 
      $(".stepText", this).addClass(".stepTextV"); 
      $(".stepTextV", this).removeClass(".stepText"); 
    }); 
}); 

我在做什麼錯？

由於提前，
布倫特M.

Answer 1

你的語法不正確，這一切，再加上接下來的（）是你的朋友在這裏:) ....

$(document).ready(function() { 
 
    $(".step").click(function() { 
 
    $(".stepTextV").removeClass("stepTextV"); 
 
    $(this).next(".stepText").addClass("stepTextV"); //You might also consider toggleClass 
 
    }); 
 
});

.step {font-weight: bold; } 
 
.stepTextV {background: pink; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ol class="steps"> 
 
    <li><span class="step">Het verkrijgen van uw wensen. </span><span class="stepText">In deze stap komen we tot een overeenstemming hoe de website eruit zal komen te zien. Dit zal te paard gaan met een of meerdere tekeningen, om een zo goed mogelijk beeld te krijgen van wat u wilt met uw website.</span> 
 
    </li> 
 
    <li><span class="step">De offerte. </span><span class="stepText">Hier krijgt u de offerte toegestuurd met alle bijkomende informatie.</span> 
 
    </li> 
 
</ol>

Answer 2

$(document).ready(function() { 
$(".step").click(function() { 
    $(this).siblings('.step').children('.stepText').removeClass('stepTextV'); 
    $(this).children('.stepText').addClass('stepTextV'); 
}); 

}）;

Answer 3

這應該工作：

$(document).ready(function() { 
    $(".step").click(function() { 
     $(this).next(".stepText") 
      .addClass("stepTextV") 
      .removeClass("stepText"); 
    }); 
});