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');
}
}
}
});