Question

我正在编写自己的网站，我正在使用它。但我是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＆lt; li＆gt;标签，所以给他们所有不同的类不是一个很好的解决方案......）

我现在想要发生的事情，例如，单击第一个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

你的语法不正确，加上next（）是你的朋友:) ....

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

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

3 个答案: