jQuery veiksmas nuo paspaudimo [jQuery]

Paskelbė | 29/01/2012 | Kategorija: jQuery | 1 Komentaras

Gavosi man šiandien parašyti jQuery funkciją, kuri nuo paspaudimo ant radiobutton daro kažką, mano atveju-keičia klasę. Tad nusprendžiau pasidalinti.

Iš tikrųjų užduotis yra lengva, tačiau kaip man, nieko nežinančiam apie jQuery teko truputį pasistengi…

Taigi, turime mes tokį kodą:

1
2
3

Taip <input type="radio" value="Taip" name="checkbox" >
<br>
Ne <input type="radio" value="Ne" name="checkbox">

Dabar paspaudus Taip mums reikia išvesti kažkokį tekstą arba formą. Kad tai padaryti siūlau paprasčiausia būdą: sukurti CSS klasę su display:none ir priskirti ją jau parengtam <div>.

Atrodo tai daugmaž taip:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<html>
<head>
<title>ApieViska.Info</title>
<style type="text/css">
.hide{display:none;}
</style>
</head>
<body>
Taip <input type="radio" value="Taip" name="checkbox" >
<br>
Ne <input type="radio" value="Ne" name="checkbox">
<div class="hide" id="laukelis">
Mūsų tekstas
</div>
</body>
</html>

Tada sukuriam failą pavyzdžiui js.js

1
2
3
4
5
6
7
8
9

$(document).change(function() {
 
  if ($('input:radio[name="checkbox"]:checked').val() === "Taip")
    $('#laukelis').removeClass('hide');
 
  if ($('input:radio[name="checkbox"]:checked').val() === "Ne")
    $('#laukelis').addClass('hide');
 
});

Išsamiau apie funkcijas:

  • .change() funkcija yra vykdoma kai elementas gauna kažkokius pakeitimus, mūsų atveju tai yra pasirinkimas Taip arba Ne
  • input:radio[name="checkbox"]:checked šitokia sintakse tikrina visus radiobuttons su name checkbox
  • val() val nuo žodžio value grąžina esamą reikšmę.
  • $(‘#laukelis’) šitas kintamasis nurodo, kokiam id daryti pakeitimus.
  • addClass() ir removeClass() prideda ir nuima stilių klases.

Taigi algoritmas yra visiškai paprastas: Pasirinkus Taip arba Ne suveikia change funkcija kurioje IF pagalba yra tikrinama esama reikšme ir nuo jos variantu keičiama klasė.

Galutinis variantas

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<html>
<head>
<title>ApieViska.Info</title>
<style type="text/css">
.hide{display:none;}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js.js"></script>
</head>
<body>
Taip <input type="radio" value="Taip" name="checkbox" >
<br>
Ne <input type="radio" value="Ne" name="checkbox">
<div class="hide" id="laukelis">
Mūsų tekstas
</div>
</body>
</html>
Žymos: , , , ,

Susiję Įrašai:

Kuriame naujus DOM elementus [jQuery] Kuriame naujus DOM elementus [jQuery]
Trumpa prezentacija apie HTML5 Trumpa prezentacija apie HTML5
Skirtumas tarp parent(), parents(), closest() [jQuery] Skirtumas tarp parent(), parents(), closest() [jQuery]
Gauname visas pažymėtas reikšmes [jQuery] Gauname visas pažymėtas reikšmes [jQuery]

1 Atsakymas

  1. Mantas sako:
    15/04/2012 01:31

    Šauniai paaiškinai! :)

Palikite komentarą

Rašyti komentarą
© 2013 Viskas Apie Viską. All rights reserved. XHTML / CSS Valid.
Proudly designed byTheme Junkie.