JQuery - selector is null, proč?? – JavaScript, AJAX, jQuery – Fórum – Programujte.com
 x   TIP: Přetáhni ikonu na hlavní panel pro připnutí webu

JQuery - selector is null, proč?? – JavaScript, AJAX, jQuery – Fórum – Programujte.comJQuery - selector is null, proč?? – JavaScript, AJAX, jQuery – Fórum – Programujte.com

 

Goldinka0
Duch
23. 6. 2011   #1
-
0
-

Ahoj,
mám v jquery vytvořené pexeso, několik "sad" s různými motivy (domy, zahrady, auta, psi).
Podle výběru sady - kliknutí na určitý odkaz s jedinečným ID, se zavolá funkce, která vloží obrázky a rovnou je rozloží a zamíchá. Obrázky se vkládají do předpřipravených divů s jedinečnými ID. Moje problémy jsou dva.
1) když je pexeso vytvořeno takto, tedy, že si obrázky do divů volám skrze funkci, nedá se dohrát, protože ačkoli tam obrázky "natvrdo" nacpu, jeden obrázek se zobrazí 3krát, místo 2krát, tudíž vznikne na konci dvojice dílků, které k sobě nepatří. - pokud pexeso nevolám skrze funkci, ale do divů nacpu obrázky a používám pouze jednu sadu, pexeso se dohrát dá ...
Funkce, která vkládá obrázky do připravených prázdných divů s ID:



<a href="javascript:" class="odkaz" id="auticka" title="Pexeso Aut">Auta</a>
<div id="boxcard">
<div id="card1"></div>
<div id="card2"></div>
<div id="card3"></div>
<div id="card4"></div>
</div>

<script> //toto se nachází v externím souboru
function Sada1() { //domky
var cesta = "<img src='img/small/";
var atributy = ".jpg' alt='Domy Archon' />";

$("#card1").html(cesta + 0 + atributy);
$("#card2").html(cesta + 0 + atributy);
$("#card3").html(cesta + 10 + atributy);
$("#card4").html(cesta + 10 + atributy);
}

$(document).ready(function() {
$("#domecky").live("click", function() {
Sada1();
resetGame();
});
$("#zahrady").live("click", function() {
Sada2();
resetGame();
});
$("#auticka").live("click", function() {
Sada3();
resetGame();
});
$("#pejsacci").live("click", function() {
Sada4();
resetGame();
});
});
</script>


Defaultně se volá sada1(), na konci html kodu, po vykreslení. Zdrobnělin v názvech si nevšímejte :))

Popravdě mě nenapadá kde je chyba - něco se mi přepisuje?

Problém 2)
Když to mám takto skoro funkční připravené (až na to že se to nedá dohrát), a chci si třeba vybrat jinou sadu s jiným css - pozadí karty, lze to pouze jednou. Respektive, obrázky se zavolají to ano, ale css tedy použité třídy u obrázků se uplatní pouze jednou :( prostě mohu se odkazy výběrů sad proklikat ale pouze jednou :( poté zůstane uplatněno poslední css. Jediné co je pak v tu chvíli správně jsou obrázky, které se po kliknutí vyměnují. Ovšem, opět. Pexeso se nedá dohrát....

Jsem přesvědčená o tom, že chyba je v kodu, který jsem pastla výše. JS kod pro míchání karet apod by měl být správně vzhledem k tomu, že pokud použiji pouze jedny obrázky a do divů s id card1-10 je nacpu tak se pexeso dohrát dá...

Firebug mi chybu v js nehlásí, ale když si do konzole dám toto:


$("#auticka").live("click", function() {
Sada3();
resetGame();
});

tak dostanu hlášku: TypeError: $("#auticka") is null
Nic jiného. Přesto id auticka existuje, a existuje pouze jedno. Stejný problém je i u dalších tří... kde je tedy chyba?

Doufám, že je dostatečně popsán problém... Jsem začátečnice, tak se nezlobte, jestli tu otravuju s nějakou naprosto základní chybou... Díky moc všem :)

Pro jistotu přidávám kod js kde se míchá pexeso apod. čerpám z příkladů na netu, snažím se toto z toho pochopit a naučit :):


var boxopened = "";
var imgopened = "";
var count = 0;
var found = 0;

function randomFromTo(from, to){
return Math.floor(Math.random() * (to - from + 1) + from);
}

function shuffle() {
var children = $("#boxcard").children();

var child = $("#boxcard div:first-child");


var array_img = new Array();

for (i=0; i<children.length; i++) {
array_img[i] = $("#"+child.attr("id")+" img").attr("src");
child = child.next();
}

var child = $("#boxcard div:first-child");

for (z=0; z<children.length; z++) {
randIndex = randomFromTo(0, array_img.length - 1);

// set new image
$("#"+child.attr("id")+" img").attr("src", array_img[randIndex]);
array_img.splice(randIndex, 1);

child = child.next();
}
}

function resetGame() {
shuffle();
$("img").hide();
$("img").removeClass("opacity");
count = 0;
$("#msg").remove();
$("span.pocitadlo").removeClass('vitez');
$("#count").html("" + count);
boxopened = "";
imgopened = "";
found = 0;
return false;
}

$(document).ready(function() {
$("img").hide();
$("#boxcard div").click(openCard);

shuffle();

function openCard() {

id = $(this).attr("id");

if ($("#"+id+" img").is(":hidden")) {
$("#boxcard div").unbind("click", openCard);

$("#"+id+" img").slideDown('slow');

if (imgopened == "") {
boxopened = id;
imgopened = $("#"+id+" img").attr("src");
setTimeout(function() {
$("#boxcard div").bind("click", openCard);
}, 400);
} else {
currentopened = $("#"+id+" img").attr("src");
if (imgopened != currentopened) {
// close again
setTimeout(function() {
$("#"+id+" img").slideToggle('slow');
$("#"+boxopened+" img").slideToggle('slow');
boxopened = "";
imgopened = "";
}, 1400);



} else {
// found
$("#"+id+" img").addClass("opacity");
$("#"+boxopened+" img").addClass("opacity");
found++;
boxopened = "";
imgopened = "";
}

setTimeout(function() {
$("#boxcard div").bind("click", openCard);
}, 1400);
}


count++;
$("#count").html("" + count);

if (found == 10) {
msg = '<span id="msg">Sláva! Posbíral/a jsi všechny dílky pexesa na </span>';
$("span.pocitadlo").prepend(msg).addClass('vitez');
}
}
}
});

Nahlásit jako SPAM
IP: 81.0.197.–
Fantomas
~ Anonymní uživatel
4 příspěvky
25. 10. 2011   #2
-
0
-

#1 Goldinka
kdybys sem mohla dát kompletní zdroj, bylo by to dobré, takhle se to nedá otestovat...

Nahlásit jako SPAM
IP: 89.103.103.–
Zjistit počet nových příspěvků

Přidej příspěvek

Toto téma je starší jak čtvrt roku – přidej svůj příspěvek jen tehdy, máš-li k tématu opravdu co říct!

Ano, opravdu chci reagovat → zobrazí formulář pro přidání příspěvku

×Vložení zdrojáku

×Vložení obrázku

Vložit URL obrázku Vybrat obrázek na disku
Vlož URL adresu obrázku:
Klikni a vyber obrázek z počítače:

×Vložení videa

Aktuálně jsou podporována videa ze serverů YouTube, Vimeo a Dailymotion.
×
 
Podporujeme Gravatara.
Zadej URL adresu Avatara (40 x 40 px) nebo emailovou adresu pro použití Gravatara.
Email nikam neukládáme, po získání Gravatara je zahozen.
-
Pravidla pro psaní příspěvků, používej diakritiku. ENTER pro nový odstavec, SHIFT + ENTER pro nový řádek.
Sledovat nové příspěvky (pouze pro přihlášené)
Sleduj vlákno a v případě přidání nového příspěvku o tom budeš vědět mezi prvními.
Reaguješ na příspěvek:

Uživatelé prohlížející si toto vlákno

Uživatelé on-line: 0 registrovaných, 7 hostů

Podobná vlákna

Visual selector — založil Filip

JSF selector label as value — založil Flowy

NULL — založil Sss

 

Hostujeme u Českého hostingu       ISSN 1801-1586       ⇡ Nahoru Webtea.cz logo © 20032024 Programujte.com
Zasadilo a pěstuje Webtea.cz, šéfredaktor Lukáš Churý