Forum PHP.pl > [JavaScript] Zmienna nie aktualizuje swojej wartości po pewnym zdarzeniu

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [JavaScript] Zmienna nie aktualizuje swojej wartości po pewnym zdarzeniu

cve

11.07.2010, 11:13:10

Witam, piszę sobie malutki skrypt prezentujący galerie i napotkałem dziwny problem, otóż chcę aby po kliknięciu przycisku #next zmienna i przyjmowała +1, a w momencie kliknięcia przycisku #prev -1, niby funkcje działają dobrze, bo fotografie przechodzą po kolei podczas kliknięcia #next, ale nie reagują warunki, w którym jest ustawione, ze gdy jest wyświetlona ostatnia fotka, to przycisk #next ma się schować, a gdy wyświetlona jest pierwsza fotka to przycisk #prev ma się schować, jest dobrze, gdy na samym początku przypiszę zmiennej i np. wartość 2, 3, 4, 5 itd, wtedy te warunki działają dobrze, bo znika #prev przy pierwszym zdjęciu, i #next przy ostatnim, ale dlaczego ta zmienna nie aktualizuje się podczas klikania w elementy?

[HTML] pobierz, plaintext 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Jquery Loader</title>
        <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
        <script type="text/javascript" src="js/js.js"></script>
    </head>
    <body>
        <div id="galeria">
            <img alt="" src="img/IMG_4533.JPG" />
            <img alt="" src="img/IMG_4540.JPG" />
            <img alt="" src="img/IMG_4551.JPG" />
            <img alt="" src="img/IMG_4553.JPG" />
            <img alt="" src="img/IMG_4832.JPG" />
            <img alt="" src="img/IMG_4838.JPG" />
            <img alt="" src="img/IMG_4973.JPG" />
            <img alt="" src="img/IMG_4997.JPG" />
            <img alt="" src="img/IMG_5010.JPG" />
        </div>
        <a href="#" id="prev">Prev</a>
        <a href="#" id="next">Next</a>
    </body>
</html>
[HTML] pobierz, plaintext

[PHP] pobierz, plaintext 
$(function(){
    $("#galeria").hide();
 
    collection = $("#galeria img").map(function() {
        return $(this).attr("src");
    }).get();
 
    i=0;
    j=collection.length;
 
    $('body').append("<img id='img' alt='' src='"+collection[i]+"' />");
 
    if(i<=0) {
        $('#prev').hide();
        $('#next').show();
    }
    if(i>=j-1) {
        $('#next').hide();
        $('#prev').show();
    }
    $('#next').click(function(){
        i = i + 1;
        $('#img').attr('src', collection[i]);
    })
    $('#prev').click(function(){
        $('#img').remove();
        i = i - 1;
        $('#img').attr('src', collection[i]);
    })
});
[PHP] pobierz, plaintext

Byłbym wdzięczny za jakąś wskazówkę. Z góry serdecznie dziękuję.
Pozdrawiam.

posiadacz

11.07.2010, 11:51:20

W listenerze obsługującym zdarzenie zmiany zdjęcia (następne lub poprzednie) nie masz obsługi pokazywania/ukrywania przycisków, dlatego działa tylko przy pierwszym wywołaniu.

Dopisz funkcje:

[PHP] pobierz, plaintext 
function showNext(){
...
}
 
function hideNext(){
...
}
function showPrev(){
...
}
function hidePrev(){
...
}
function manageButton(currentPic, maxPic){
 if(currPic == 0){
  hidePrev();
 }else{
 showPrev();
 }
 
 if(currPic => maxPic){
  hideNext();
 }else{
  showNext();
 }
}
[PHP] pobierz, plaintext

i w sekcji

[PHP] pobierz, plaintext 
$('#next').click(function(){
i = i + 1;
 manageButtons(i, j);
$('#img').attr('src', collection[i]);
 
})
 
$('#prev').click(function(){
 manageButons(i, j);
$('#img').remove();
 
i = i - 1;
 
$('#img').attr('src', collection[i]);
 
})
[PHP] pobierz, plaintext

I pokombinuj bo można to jeszcze ladniej zrobic, tak po prostu dziala.

cve

11.07.2010, 12:16:32

Działa

dziękuję bardzo.

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.