jQuery - Stergere stiluri css adaugate anterior

Discutii si intrebari legate de scripturi si functii JavaScript, jQuery si Ajax, cod JavaScript in general.
General
Mesaje: 26

jQuery - Stergere stiluri css adaugate anterior

In codul asta este o problema, cind fac click pe elementul dat $('#products > li > a') se adauga stilurile css de mai sus, dar cind deja fac click pe alt element tot asa $('#products > li > a') stilurile de la elementul curent nu se sterg ci ramin asa si corespunzator daca fac click pe 5 elemente ele toate iau stilurile date, pe cind ar trebuie numai ala pe care fac click. Mai pe scurt trebuie sa fac vreun fel de .remove() ceva inainte de fiecare click dar nu se primeste.

Cod: Selectaţi tot

$('#products > li > a').on('click', function(e) {
     var img = $(this).find('img.arrow');
	 
  if ($('#products > li > ul').hasClass("active")) {
        img.attr("src", img.attr("src").replace("arrow-down.png", "arrow-up.png"));
		$(this).css( {
		"background-color": "#04BEF2",
		"color": "white",
		"text-decoration": "initial"
		});
  } else {
        img.attr("src", img.attr("src").replace("arrow-up.png", "arrow-down.png"));
		$(this).css("background-color","transparent");
  }
});

MarPlo
Pai da, inainte de a aplica stilurile trebuie un cod ca sa le stearga pe cele adaugate anterior.
Incearca asa, retii intr-o variabila elementul la care se adauga, si inainte de a adauga, anulezi acele stiluri de la obiectul retinut.

Cod: Selectaţi tot

var prev_elm =0;
$('#products > li > a').on('click', function(e){
  //removes styles from previous element
  if($('#products > li > ul').hasClass("active")){
    if(prev_elm !=0) prev_elm.css({ "background-color":'', "color":'', "text-decoration":''});
    prev_elm = $(this);  //keep current element

    var img = $(this).find('img.arrow');
    img.attr("src", img.attr("src").replace("arrow-down.png", "arrow-up.png"));
    $(this).css({
      "background-color": "#04BEF2",
      "color": "white",
      "text-decoration": "initial"
   });
  } else {
    img.attr("src", img.attr("src").replace("arrow-up.png", "arrow-down.png"));
    $(this).css("background-color","transparent");
  }
});

General
Da acum css se schimba, dar imaginea nu, pentru ca in cazul daca se facea conditia if se modifica si imaginea, dar acum nu se modifica, principiul e tot ca si la css, cind apas click pe element arata o imagine, iar cind apas click pe alt element imaginea din elementul precedent trebuie sa fie default cum era

MarPlo
Daca imaginea e in elementul retinut, o gasesti cu find() si aplici inversarea la "src".
Vezi cum e acest cod:

Cod: Selectaţi tot

var prev_elm =0;
$('#products > li > a').on('click', function(e){
  //removes styles from previous element and restore img
  if($('#products > li > ul').hasClass("active")){
    if(prev_elm !=0){
      prev_elm.css({ "background-color":'', "color":'', "text-decoration":''});
      prev_elm.find('img.arrow').attr("src").replace("arrow-up.png", "arrow-down.png"));
    }
    prev_elm = $(this);  //keep current element

    var img = $(this).find('img.arrow');
    img.attr("src", img.attr("src").replace("arrow-down.png", "arrow-up.png"));
    $(this).css({
      "background-color": "#04BEF2",
      "color": "white",
      "text-decoration": "initial"
   });
  } else {
    img.attr("src", img.attr("src").replace("arrow-up.png", "arrow-down.png"));
    $(this).css("background-color","transparent");
  }
});

General
straniu, imaginea se modifica cind faci click pe element, dar cind faci click pe alt element dupa precedentul click imaginea ramine tot asa, dar ar trebuie sa se modifice

MarPlo
Pune codul pe un site precum jsfiddle.net/ (si linkk-ul aici) ca sa se poata vedea si testa direct de cei care vor sa ajute pe acest forum.

General
Nu se primeste sa pun cod-ul pe jsfiddle.net pentru ca e ceva gen template.
Insa rezultat se poate vedea aici:
mattkersley.com/responsive/

introduci adresa URL: visionmagazin.ru si primesti asta:
prntscr.com/991dgc

MarPlo
Incearca si acest cod, retine si imaginea separat. Daca nu merge, nu stiu care-i problema.

Cod: Selectaţi tot

var prev_elm =0;
var prev_img =0;
$('#products > li > a').on('click', function(e){
  if($('#products > li > ul').hasClass("active")){
    var img = $(this).find('img.arrow');

    //removes styles from previous element and change img back
    if(prev_elm !=0) prev_elm.css({ "background-color":'', "color":'', "text-decoration":''});
    if(prev_img !=0) prev_img.attr("src").replace("arrow-up.png", "arrow-down.png"));
    prev_elm = $(this);  //keep current element
    prev_img = img;  //keep current img

    img.attr("src", img.attr("src").replace("arrow-down.png", "arrow-up.png"));
    $(this).css({
      "background-color": "#04BEF2",
      "color": "white",
      "text-decoration": "initial"
   });
  } else {
    img.attr("src", img.attr("src").replace("arrow-up.png", "arrow-down.png"));
    $(this).css("background-color","transparent");
  }
});

Subiecte similare