Forum PHP.pl > [jQuery] Przekazywanie zmiennych

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [jQuery] Przekazywanie zmiennych

Wieviór

21.12.2008, 20:27:07

Mam taki oto kod, który pozwala na zmianę wielkości czcionki w divie #newsTresc1 klikając na linki #makeSmaller1 i #makeBigger1.

Działa, chociaż na pewno mógłbym go jakoś skrócić, zamiast dwóch funkcji stworzyć jedną (tu też proszę o jakieś wskazówki).

Głównie jednak chodzi mi o to, że takich newsów na stronie mam powiedzmy 10 i dla każdego chciałbym mieć tą opcję. Linki i divy tworzą się z numerkami, bo są wyświetlane z pomocą pętli. Chciałbym, żeby numer z #makeSmaller(oraz analogicznie #makeBigger) był przekazywany do środka funkcji, żeby odpowiedni div obsługiwał.

Kod

$(document).ready(
function()
    {
    $("#makeSmaller1").click(
    function()
        {
        var font = $("#newsTresc1").css("font-size");
        var line = $("#newsTresc1").css("line-height");
        var fontSize = parseFloat(font, 10);
        var lineHeight = parseFloat(line, 10);
        fontSize -= 2;
        lineHeight -= 3;
        $("#newsTresc1").css("font-size",  fontSize + "px");
        $("#newsTresc1").css("line-height",  lineHeight + "px");
        return false;
        }
    );
    }
);
$(document).ready(
function()
    {
    $("#makeBigger1").click(
    function()
        {
        var font = $("#newsTresc1").css("font-size");
        var line = $("#newsTresc1").css("line-height");
        var fontSize = parseFloat(font, 10);
        var lineHeight = parseFloat(line, 10);
        fontSize += 2;
        lineHeight += 3;
        $("#newsTresc1").css("font-size",  fontSize + "px");
        $("#newsTresc1").css("line-height",  lineHeight + "px");
        return false;
        }
    );
    }
);

Dopiero zaczynam zabawę z jQuery, proszę o jakąś pomoc, z góry dzięki

erix

21.12.2008, 21:42:04

Cytat

Głównie jednak chodzi mi o to, że takich newsów na stronie mam powiedzmy 10 i dla każdego chciałbym mieć tą opcję. Linki i divy tworzą się z numerkami, bo są wyświetlane z pomocą pętli. Chciałbym, żeby numer z #makeSmaller(oraz analogicznie #makeBigger) był przekazywany do środka funkcji, żeby odpowiedni div obsługiwał.

Zrób inaczej. Robisz nagłówki z trzema klasami, w ten deseń:

Kod

.fontOne #naglowek
{ font-size: large; }

.fontTwo #naglowek
{ font-size: medium; }

.fontThree #naglowek
{ font-size: small; }

I obiekty, do których odnoszą się powyższe deklaracje zamykasz w kontenerze. Potem wystarczy JEDNA linijka:

Kod

$('#kontener').removeClass('fontOne fontTwo fontThree').addClass('fontOne');

i cała filozofia.

Wieviór

21.12.2008, 22:35:26

Ok, zdecydowanie Twoje rozwiązanie jest lepsze, zdecydowałem się na dwa rozmiary czcionki (normalny i większy). Teraz mój kod wygląda tak:

Kod

$(document).ready(
function()
    {
    $(".makeSmaller").click(
    function()
        {
        $("#newsTresc1").removeClass("newsTrescBigger").addClass("newsTresc");
        }
    );
    }
);
$(document).ready(
function()
    {
    $(".makeBigger").click(
    function()
        {
        $("#newsTresc1").removeClass("newsTresc").addClass("newsTrescBigger");
        }
    );
    }
);

Nadal jednak nie wiem jak rozwiązać to, żeby dla danego przycisku zmieniał się rozmiar czcionki w danym newsie.

Zmieniłem makeSmaller i makeBigger na class, nadaję im teraz id jako kolejne numery, chciałem żeby w środku tych funkcji, była instrukcja wyczytująca id, tego w co było kliknięcie i dodająca to do kawałku kodu:

Kod

$("#newsTresc[tutaj ta zmienna]")

Jak wyczytać id klikniętego elementu?

erix

21.12.2008, 22:39:57

Ale nie tak zrobiłeś.

Kod

function()
{
$(".makeBigger").click(

Nie dawaj tego dla klasy, a dla przycisku.

Cytat

Nadal jednak nie wiem jak rozwiązać to, żeby dla danego przycisku zmieniał się rozmiar czcionki w danym newsie.

Przeczytałeś uważnie, co napisałem?

Nie kombinuj z numerami nagłówków, bo nie ma takiej potrzeby. Wystarczy tylko elementowi nadrzędnemu nadawać klasy + deklaracje w CSS, jak napisałem.

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.