jQuery - Stergere stiluri css adaugate anterior

[General]

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");
  }
});

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");
  }
});

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

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");
  }
});

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

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.

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

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");
  }
});