单击此按钮时，将类添加到特定的类

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"); 
    }); 
});