Pereiti prie turinio

Manipuliacija su DOM + javascript


Rekomenduojami pranešimai

Mintis tokia:

 

Noriu į esančius kvadratus (div'ai) sugeneruot atsitiktinius skaičius ir leisti vartotojui ant jų suspaudyti iš eilės ir panaikinti, tą div'ą, jei paspaudė teisingai.

 

PVZ. Sugeneravau 2 3 1 4 ir vartotojas spaudžia ir lieka 2 3 _ 4, paskui _ 3 _ 4 ir t.t.

 

Ką naudoti? jQuery? Kokias komandas?

Nuoroda į pranešimą
Dalintis kituose puslapiuose

Tu paaiškink normaliai, nes dabar kaip suprantu tu nori labai paprasto dalyko, paspaudus divą, kad jis išnyktu (jquery):

 

<script>
$(document).ready(fucntion(){

$('div').each(function(){ 
  $(this).click(function(){ 
     $(this).hide();
     console.log($(this).attr('id'));
  }); 
}); 

});

</script>

<div id="1"></div>
<div id="2"></div>
<div id="3"></div>
<div id="4"></div>

 

Netikrinau, bet turėtų veikt.

Redagavo EdvinasJ
Nuoroda į pranešimą
Dalintis kituose puslapiuose

$(".grid").children( "div" ).on("click", function()
{ $(this).css("visibility", "hidden");
});

 

Šitą pasidariau.

 

Aš noriu padaryti a la žaidimą, kad žmogus naikintų tuos div'us, bet ne bet kaip, o eilės tvarka. Žaidimukas 3 metų vaikui. Tarkim divai sunumeruojami skaičiais (randomu) ir tada pagal tai, leistų naikint arba rašytų, kad pasirinktas netinkamas divas.

Redagavo naujasz
Nuoroda į pranešimą
Dalintis kituose puslapiuose

Laba,

pamėginsiu padėt ;)

$(".grid").children( "div" ).on("click", function() { 
$(this).css("visibility", "hidden");
});

 

Šį kodą galima supaprastinti:

$(".grid > div").click( function() {
$(this).css("opacity", "0"); 	// Jei norima tik paslėpti div, bet kitų div'ų išsidėstymas nepasikeičia    $(this).hide();     	// Jei išvis paslėpti elementą, kiti divai pasistumia
});

 

Toliau, jei nori sekti ar spaudžiama eilės, turi turėti laikiną kintamąjį saugoti skaičiui, kurį reikia paspausti ir tada "click" funkcijoje tikrinti ar paspaustas reikalingas div.

Beje reikia atsižvelgti, kaip žymėsies kur div'e saugosi jo numerį, patogiausia ID. Dar galima HTML5 data atributą, bet čia savo pasižaidimui.

Tarkime <div id="1"></div>, tai pvz:

 

var number = 1;

$(".grid > div").click( function() {
div = $(this);
if ( div.attr('id') == number ) {
	div.css("opacity", "0"); number += 1;
} 
else { 
	alert('Dėja, ne tas skaičius');
}
});

 

Netestavau, bet turėtų veikti. :)

Redagavo Kazparaz
Nuoroda į pranešimą
Dalintis kituose puslapiuose

Prisijunkite prie diskusijos

Jūs galite rašyti dabar, o registruotis vėliau. Jeigu turite paskyrą, prisijunkite dabar, kad rašytumėte iš savo paskyros.

Svečias
Parašykite atsakymą...

×   Įdėta kaip raiškusis tekstas.   Atkurti formatavimą

  Only 75 emoji are allowed.

×   Nuorodos turinys įdėtas automatiškai.   Rodyti kaip įprastą nuorodą

×   Jūsų anksčiau įrašytas turinys buvo atkurtas.   Išvalyti redaktorių

×   You cannot paste images directly. Upload or insert images from URL.

Įkraunama...
  • Dabar naršo   0 narių

    Nei vienas registruotas narys šiuo metu nežiūri šio puslapio.

  • Prisijunk prie bendruomenės dabar!

    Uždarbis.lt nariai domisi verslo, IT ir asmeninio tobulėjimo temomis, kartu sprendžia problemas, dalinasi žiniomis ir idėjomis, sutinka būsimus verslo partnerius ir dalyvauja gyvuose susitikimuose.

    Užsiregistruok dabar ir galėsi:

    ✔️ Dalyvauti diskusijose;

    ✔️ Kurti naujas temas;

    ✔️ Rašyti atsakymus;

    ✔️ Vertinti kitų žmonių pranešimus;

    ✔️ Susisiekti su bet kuriuo nariu asmeniškai;

    ✔️ Naudotis tamsia dizaino versija;

    ir dar daugiau.

    Registracija trunka ~30 sek. ir yra visiškai nemokama.

  • Naujausios temos

  • Karštos temos

×
×
  • Pasirinkite naujai kuriamo turinio tipą...