Wenn Sie darauf klicken, fügen Sie eine Klasse zu einer bestimmten Klasse hinzu

Question

Ich kodiere meine eigene Website und ich benutze jQuery damit. Aber ich bin ein Anfänger mit jQuery und ich habe eine kleine Frage. Ich habe in meinem HTML-doc:

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

(Dies ist eine verkürzte Version, ich habe es mit 6 <li> Tags, so geben sie alle verschiedenen Klassen ist nicht eine große Lösung ...)

Was ich jetzt machen will, ist wenn zB Der erste Bereich (Klasse = Schritt) wird angeklickt, der daneben liegende Bereich (Klasse = SchrittText) muss eine neue Klasse haben. Das ist mein jQuery-Code:

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

Was mache ich falsch?

Vielen Dank im Voraus,
Brent M.

Answer 1

Ihre Syntax ist falsch das alles ist, plus next() ist dein Freund hier :) ....

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

Dies sollte funktionieren:

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