Fórum Root.cz

Hlavní témata => Vývoj => Téma založeno: Kolesa 24. 04. 2018, 23:01:56

Název: Doplnění jQuery kódu
Přispěvatel: Kolesa 24. 04. 2018, 23:01:56
Ahoj chlapy, chodí sem někdo kdo dělá v jQuery? Potřebuji doplnit kód ale netuším vůbec jak.
Tento kód mi změní po kliknutí na html tag p barvu, potřeboval bych ale aby se po opětovném kliknutí vrátil požadovaný css style. Může prosím někdo poradit? Děkuji.
Kód: [Vybrat]
$("p").on("click", function(){
$(this).css("background", "orange");
$(this).css("color", "white");
});
Název: Re:Doplnění jQuery kódu
Přispěvatel: Rob Ros 24. 04. 2018, 23:24:09
Kód: [Vybrat]
$("p").on("click", function(){
    var $p = $(this);
    if ($p.hasClass('clicked')) {
        $p.removeClass('clicked');
        $p.css("background", "");
        $p.css("color", "");
    } else {
        $p.addClass('clicked');
        $p.css("background", "orange");
        $p.css("color", "white");
    }
});
Název: Re:Doplnění jQuery kódu
Přispěvatel: sifon 24. 04. 2018, 23:45:39
a není to otrocké opakování?
3x se tam opakuje slovo clicked, 2x se tam opakují názvy měněných vlastností.

Není něco jako toggle class?

x.onclick(toggle  {background: { false, 'red'}, color: {blue, null} , shadow{ green, darkgreen} } )


Není jednoduší jen s každým klikem togglovat nějaký parametr například class clicked a vytvořit si bokem definici třídy .clicked?
Název: Re:Doplnění jQuery kódu
Přispěvatel: J.V. 25. 04. 2018, 09:07:52
toggleclass tu moc platny nebude, stejne musi zjistit stav. Ale zkratit to lze:
Kód: [Vybrat]
$("p").on("click", function(){
    var $p = $(this);
    if ($p.hasClass('clicked')) {
        $p.removeClass('clicked').css({background: "", color: ""});
    } else {
        $p.addClass('clicked').css({background: "orange", color: "white"});
    }
});
Název: Re:Doplnění jQuery kódu
Přispěvatel: pepa 25. 04. 2018, 09:28:46
toggleclass tu moc platny nebude, stejne musi zjistit stav. Ale zkratit to lze:
Kód: [Vybrat]
$("p").on("click", function(){
    var $p = $(this);
    if ($p.hasClass('clicked')) {
        $p.removeClass('clicked').css({background: "", color: ""});
    } else {
        $p.addClass('clicked').css({background: "orange", color: "white"});
    }
});

A je nutné si ten stav pamatovat přes class není jednoduší použít  $.data nebo proměnou.
Název: Re:Doplnění jQuery kódu
Přispěvatel: Johnny 25. 04. 2018, 09:35:21
Co zkusit:
Kód: [Vybrat]
.clicked { background: orange; color: white; }
Kód: [Vybrat]
$("p").on("click", function(){ $(this).toggleClass("clicked"); })
Název: Re:Doplnění jQuery kódu
Přispěvatel: Johnny 25. 04. 2018, 09:38:55
A nebo ještě jednodušeji:
Kód: [Vybrat]
$("p").click(function(){ $(this).toggleClass("clicked"); })