Forum PHP.pl > [Jquery][JS] Poprawa kodu

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [Jquery][JS] Poprawa kodu - zwijanie i odwijanie

Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript

yozer2308

4.01.2012, 09:38:35

[HTML] pobierz, plaintext 
<font face="Verdana" size="3">
<b>09 styczeń 2012 - Szkolenie 1 test</b>
</font>
 
<font face="Verdana" size="2">
<p id="szk1">
Test to działa!
</p></font>
<font face="Verdana" size="1">
<p id="show1" align="right" style="color:  red; cursor: pointer;">więcej...
</p></font>
 
<font face="Verdana" size="3">
<b>09 styczeń 2012 - Szkolenie 2 test</b>
</font>
 
<font face="Verdana" size="2">
<p id="szk2">
Test to działa! Hura!
</p></font>
<font face="Verdana" size="1">
<p id="show2" align="right" style="color:  red; cursor: pointer;">więcej...
</p></font>
[HTML] pobierz, plaintext

I taki kod jquery:

[HTML] pobierz, plaintext 
$(document).ready(function(){
 
$('#szk1').css('display','none');
    $('#show1').click(function(){
        if ($("#szk1").is(":hidden")) {
 
            $("#szk1").slideDown("slow");
            $('#show1').text('schowaj...');
 
            }
        else{
 
        $("#szk1").slideUp("slow");
        $('#show1').text('więcej...');
 
        }
});
 
$('#szk2').css('display','none');
    $('#show2').click(function(){
        if ($("#szk2").is(":hidden")) {
            $("#szk2").slideDown("slow");
            $('#show2').text('schowaj...');
            }
        else{
        $("#szk2").slideUp("slow");
        $('#show2').text('więcej...');
        }
 
      });
 
});
[HTML] pobierz, plaintext

W przypadku dwóch rozwijających się elementów, jeszcze ujdzie chociaż i tak brzydko to wygląda.
A ja nie mam pomysłu jak to zrobić tak "elegencko" (tzn. żebym do każdego rozwijanego elementu nie musiał dodawać znowu tych kilku linijek).

kaem

4.01.2012, 09:55:57

Zamiast id nadaj tym elementom takie same klasy, np: class="szk" i class="show". Wrzuć każdy powtarzający się kawałek htmla do diva. I teraz jak klikniesz w element $('.szk'), szukasz elementu o klasie show znadjującego się w tym samym divie i sprawdzasz czy jest ukryty. Pomogą Ci w tym, np. takie metody JQuery: parent(), find(), children(), eq(), hth-child(). Sposobów w sumie na rozwiązanie tego problemu jest jest kilka. Przejrzyj doc jQuery bo tam jest b. ładnie wszystko opisane.

by_ikar

4.01.2012, 12:10:28

Lepiej użyć coś uniwersalnego:

[JAVASCRIPT] pobierz, plaintext 
$(document).ready(function(){
    $('.hide').css('display', 'none');
    $('.showhide').click(function() {
        var href = $(this).attr('href');
        $(href).slideToggle(300);
        return false;
    });
});
[JAVASCRIPT] pobierz, plaintext

Przykład:

[HTML] pobierz, plaintext 
<!DOCTYPE html>
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script>
    $(document).ready(function(){
        $('.hide').css('display', 'none');
        $('.showhide').click(function() {
            var href = $(this).attr('href');
            $(href).slideToggle(300);
            return false;
        });
    });
  </script>
</head>
<body>
 
<a href="#szk2" class="showhide">więcej...</a>
<div id="szk2" class="hide">Test to działa! Hura!</div>
 
</body>
</html>
[HTML] pobierz, plaintext

Skopiuj sobie kod html, zapisz otwórz w przeglądarce kliknij na "więcej..". W href podajesz identyfikator, razem z hashem, elementu który ma zostać "odsłonięty" po kliknięciu. Elementowi który ma być ukryty nadajesz klasę hide, coby od razu go ukryć.

yozer2308

4.01.2012, 14:39:17

Ok, działa pięknie. Dokładnie o coś takiego mi chodziło.
Dzięki.

Tylko po co return false; na końcu?

by_ikar

4.01.2012, 15:15:51

Po to żeby ci tej kotwicy która jest w linku nie przypisywało do adresu.

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.