Javascript Inkorten dmv if statement

[vistavision]

Hallo allen,

Ik ben nog maar net begonnen met javascript en nu heb ik een werkend scriptje gemaakt en probeer deze in te korten door middel van een if, elseif statement. Alleen dat wil echt niet lukken en ik kom er niet uit. Dit is mijn script:

<script>
$(document).ready(function(){
  $(".vraag1").click(function(){
  $(".vraag1").removeClass("actief");
  $(this).toggleClass("actief");
  });
});
</script>

<script>
$(document).ready(function(){
  $(".vraag2").click(function(){
  $(".vraag2").removeClass("actief");
  $(this).toggleClass("actief");
  });
});
</script>

<script>
$(document).ready(function(){
  $(".vraag3").click(function(){
  $(".vraag3").removeClass("actief");
  $(this).toggleClass("actief");
  });
});
</script>

<script>
$(document).ready(function(){
  $(".vraag4").click(function(){
  $(".vraag4").removeClass("actief");
  $(this).toggleClass("actief");
  });
});
</script>

Hoe kan ik dit zo kort mogelijk opschrijven? Alvast bedankt voor alle hulp!!

Groeten,
Mark

 

[Tha Devil]

Het is niet nodig elke keer opnieuw de $(document).ready() opnieuw aan te roepen. Dat kan éénmalig.

Verder kun je met jQuery (want dat is dit meer dan "gewoon" javascript) meerdere selectors opgeven, en binnen de functie naar de betreffende selector verwijzen door middel van this.

Ook kun je met jQuery functies achter elkaar gebruiken zodat je niet opnieuw de selector hoeft aan te roepen.

Al met al kom je hier dus op uit:

<script>
$(document).ready(function(){
  $(".vraag1, .vraag2, .vraag3, .vraag4").click(function(){
    $(this").removeClass("actief").toggleClass("actief");
  });
});
</script>

Dan is alleen nog de vraag waarom je toggleClass() gebruikt, nu wordt altijd de klasse "actief" verwijderd en daarna getoggled, maar dat is toch altijd de klasse toevoegen.

Wat moet volgens jou de werking van die script zijn?

 

[vistavision]

Hallo Tha Devil,

WOW! Kijk hier kom ik verder mee! Super bedankt!!! Ik ga er gelijk mee aan de slag. Wat ik wil bereiken is het volgende:

Ik heb meerdere vragen en per vraag bijvoorbeeld 3 antwoorden. De bezoeker kan maar 1 van de 3 vragen aanklikken, waarna deze actief wordt.

<div class="stelling" id="stelling1">
<p class="vraagtekst">Vraag 1</p>
<h2>De vraag 1</h2>
<a class="animatie knop vraag1" href="#/stelling/2">Normaal</a>
<a class="animatie knop vraag1" href="#/stelling/2">Goed</a>
<a class="animatie knop vraag1" href="#/stelling/2">Zeer Goed</a>
</div>
<div class="stelling" id="stelling2">
<p class="vraagtekst">Vraag 2</p>
<h2>De vraag 2</h2>
<a class="animatie knop vraag2" href="#/stelling/3">Onbelangrijk</a>
<a class="animatie knop vraag2" href="#/stelling/3">Belangrijk</a>
<a class="animatie knop vraag2" href="#/stelling/3">Zeer belangrijk</a>
<a  class="terug knop"href="#/stelling/4">Terug</a>
</div>

Dus om een active toe te voegen, gebruik ik bovenstaand javascript. Wellicht kan het nog een stuk beter?

Ik heb nog een lastige vraag, maar ik denk dat ik daarvoor het beste op een php forum kan zijn. Ik wil namelijk alle gekozen opties opslaan en deze laten zien op de resultatenpagina. Deze wil ik matchen met een MySQL database. Hebben jullie misschien hier nog tips voor? Ik open graag nog een nieuw topic! Ik ben echt super blij met jullie hulp!!

Groeten,
Mark

 

[Tha Devil]

Waarom gebruik je daar niet gewoon een formulier voor? Daar zijn <input type="radio">-tags voor bedoeld

 

[vistavision]

Klopt helemaal! Dat had ik in eerste instantie ook, maar ik wil qua ontwerp dit graag hebben:
http://bit.ly/1kGUGJ6

En ik heb al veel gelezen, maar dat schijnt heel lastig te zijn met radiobuttons en wordt niet aangeraden? Ik weet alleen dus niet hoe ik het zonder form post voor elkaar moet krijgen. Mag ik daar een nieuw topic voor openen of kan dat gewoon hier?

Heel erg bedankt!!

 

[Tha Devil]

Met radio-buttons kan in feite prima, elke vraag in een aparte div en telkens toon je de ene div en verberg je de rest.

Uiteindelijk heb je dan één heel groot formulier met alle vragen waarvan je steeds maar één vraag toont.
Aan de hand van wat javascript zorg je er voor dat divs getoond en verborgen worden.

Als laatste heb je dan de submit-knop waardoor het formulier verzonden wordt en je deze op de volgende pagina kunt gaan verwerken.

 

[vistavision]

Hallo Tha Devil,

Met jouw advies ben ik nu een uurtje aan het stoeien en het gaat qua styling inderdaad lukken!! Ik ben je echt heel dankbaar voor je hulp! Zo kom ik een stuk verder. Nog 1 vraagje waar ik niet uitkom. In het voorbeeld kun je, als je een vraag ingevuld hebt (van vraag 1 naar vraag 2), ook teruggaan naar de vorige vraag (vraag 1). Dan is het gekozen antwoord geselecteerd. Dit werkt!

Alleen nu wil ik eigenlijk dat je eventueel op dat moment ook weer op de knop kunt klikken die je bij vraag 1 gekozen hebt. Omdat ik nu met een radiobutton werk, kan ik niet meer klikken op de reeds gekozen vraag. Hoe krijg ik het voor elkaar dat als ik klik op een gekozen antwoord, dat hij ook weer keurig naar vraag 2 gaat? Ik hoop dat het duidelijk is? Als me dit lukt, gaat de rest ook zeker lukken!

Thanks!!

 

[Tha Devil]

Je bedoelt dat als je een selectie bij vraag 1 maakt hij dan naar vraag 2 moet gaan?

Dat is een kwestie van het onChange-event van dat formulier element afvangen en de actie uitvoeren om naar een andere vraag te gaan .

In feite is het gewoon een "tab"-functionaliteit, waarbij elke vraag in een tab zit.

Daar zijn tools voor:
http://jqueryui.com/tabs/
http://getbootstrap.com/javascript/#tabs
http://foundation.zurb.com/docs/components/tabs.html

 

[vistavision]

Hoi Tha Devil,

Nee ik bedoel het volgende. Ik begin met de test bij vraag 1. Stel daar vul ik A in. Vervolgens gaat de test automatisch naar vraag 2, maar kan ik nog wel terug klikken naar vraag 1.

Daar aangekomen is antwoord A nog geselecteerd, maar op dat moment kan ik daar niet meer op klikken. Ik zou graag willen dat als ik er dan weer op klik, ik dan weer naar vraag 2 ga. Is dat mogelijk?

Heel erg bedankt voor je hulp!!