javascript - 单击此按钮后，将一个类添加到特定类

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 个

标签，所以给它们所有不同的类并不是一个很好的解决方案......)

我现在想要发生的是，例如单击第一个跨度 (class = step)，它旁边的跨度 (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

你的语法不正确，仅此而已，再加上 next() 是你的 friend :) ....

$(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>