Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Ukrywanie bloku DIV
Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript
anm
Chciałbym prosić o pomoc w prostym skrypcie. Wybranie jednej z opcji na rozwijanej liście ukrywałoby (lub pokazywało) blok <div>.

Potrzebuję zrobić dokładnie coś takiego:
Lista Shoe Size w tym sklepie służy do wybierania rozmiaru buta. Po wybraniu rozmiaru cena automatycznie zmienia się. Cena zawarta jest w bloku
  1. <div class="price-box">...</div>


Chciałbym aby blok ten był ukryty zawsze, gdy nie wybrano żadnego rozmiaru, czyli gdy na liście wybrany jest napis "Coose an Option...". Aby ukryć blok trzeba by mu nadać styl visibility:hidden, lub po prostu nadać mu wcześniej zdefiniowaną klasę "ukryty", która miałaby już ten styl.

Nie znam się na JavaScript, ale wygląda to na prosty skrypt. smile.gif Będę bardzo wdzięczny za wszelką pomoc.
zegarek84
moim zdaniem jeśli już coś chcesz ukrywać to cały blok razem z dodaniem do koszyka... poza tym nie widzę, by cena tam się zmieniała - jeśli by się zmieniała to wystarczyło by wyświetlić tam pusty tekst domyślnie... jako, że nie wszystkie przeglądarki obsługują getElementsByClassName to wziąłem trochu inaczej - ale to mało ważne jak znajdziesz te elementy - wystarczy je znaleźć i podać jako parametr funkcji którą teraz Ci podam... dodaj ten skrypt za formularzem:
Kod
<script type="text/javascript">
(function() {
    var $select = document.getElementById('attribute502'),
    $el = document.getElementById('product-price-135_clone').parentNode.parentNode,
    sprawdz_by_ukryc = function($select, $el){
        if(!$select || !$el) throw new Error('nie zdefiniowany select lub element');
        $select.onchange = function() {
            $el.style.visibility = (isNaN(parseInt(this.value)))?'hidden':'visible';
        }
    };
    $el.style.visibility = 'hidden'; /* domyślnie ukryty blok */
    /* podpięcie listenera pod onchange - można zwykłymi listenerami zamiast na sztywno - nawet wskazane przebudowanie funkcji powyżej */
    sprawdz_by_ukryc($select, $el);
})()
</script>
anm
Dziękuję, zaraz to przetestuję.

A przykład ze zmienianiem cen można zobaczyć TUTAJ, przedtem pomyliłem link, przepraszam. smile.gif

Wszytko działa pięknie, jeszcze raz wielkie dzięki.

Pisałeś, że jeśli cena by się zmieniała (tak jak w tym przykładzie) to "wystarczyło by wyświetlić tam pusty tekst domyślnie". Pomyślałem sobie, że zamiast tego pustego tekstu, można by wyświetlić "wybierz opcję". Czy mógłbyś pokazać, jak to zrobić?

W tym przykładzie cena jest wyświetlana w dwóch miejscach (różne ID), więc załóżmy, że jest wyświetlana tylko w jednym. Chyba, że byłbyś w stanie pokazać mi, jak dobrać się do boksów z cenami odszukując je po nazwie klasy smile.gif (oba mają takie same).

Pozdrawiam

A jeszcze jedno, jakie przebudowanie funkcji miałeś na myśli, pisząc, że jest wskazane? Jakaś poważna wada?
zegarek84
widzę, że jest zaimplementowany framwork Prototype... więc ceny do zmiany wartoci odnajdziesz w ten sposób:
$$('.product-essential .price') - jest to tablica cen składająca się z 2 elementów - więc pierwszy to $$('.product-essential .price')[0]

nie wiem jak masz zmieniane ceny - nie chce mi się szukać skryptu - czy przez DOM czy przez innerHTML - jedno z drugim może nie grać jeśli element jest nadpisywany...

pasuje jeszcze gdy ceny nie będzie ukryć box z zatwierdzeniem zakupu który odszukać można przez:
$$('.product-essential .add-to-cart')[0]

co do przebudowania funkcji miałem na myśli zmianę zdażenia onchange na listenera addEventListener('change', funkcja, false) [na IE to z atachEvent...] - ale skoro jest prototype to z Event.observe
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.
Invision Power Board © 2001-2025 Invision Power Services, Inc.