Autor Zpráva
Seki
Profil
Ahoj, mám následující kód, který má při kliknutí nahradit obrázek jiným obrázkem. Do budoucna ještě bude vysílat update nad databází. Ovšem je tu problém, že podmínka jinak, funkční ve firefoixu je nefunkční v IE a vždy to shočí na else větev :(

<!doctype html>                                         
<html lang="en">                                        
<head>                                                  
<meta charset="windows-1250">                           
<title>cfwe</title> 
<script src="jq2.js"></script>   
<script>    
/* Nechat ve class changer - predejiti kolize s jinymi obrazky */  
$(function() {
  $('.changer').click(function(){  
    var id = this.id;   
    alert(id);
    if($("#" + id).attr('src') == "star.png"){
      $("#" + id).attr('src',"star_none.png");
      alert("2");
    }
    else {
    alert("1");
      $("#" + id).attr('src',"star.png");
    }
    return false;
  });
});
</script>
</head>  
<body>

<img id='i_1' class='changer' src='star_none.png' alt='none' />
<img id='i_2' class='changer' src='star_none.png' alt='none' />
<img id='i_3' class='changer' src='star_none.png' alt='none' />
<img id='i_4' class='changer' src='star_none.png' alt='none' />   
</body>
</html>



Řešení:
/* Nechat ve class changer - predejiti kolize s jinymi obrazky */ 
/* IE(10) vrací v attr celou cestu k souboru, ff nikoliv */ 
$(function() {
  $('.changer').click(function(){  
    var id = this.id;         
    var arr = ($("#" + id).attr('src')).split("/");
    
    if(arr[arr.length - 1] == "star.png"){
      $("#" + id).attr('src',"star_none.png");
    }
    else {
      $("#" + id).attr('src',"star.png");
    }
    return false;
  });
});

IE 10 (jinde netestováno) vrací pomocí metody attr celou cestu k souboru, a v prvně testovaném firefoxu to vrací jen název souboru. Vyřešil jsem to teda splitnutím dle lomítek a porovnáním jen názvu obrázků. Pokud má někdo efektivnější a hlavně funkční řešení, přesto ho rád uvítám :)
_es
Profil
Seki:
Viď Časté potíže, zajímavosti a poučné debaty » Problémy se setAttribute/getAttribute. Prečo nepoužiješ this.src? Aký má zmysel vyhľadávanie elementu podľa id, keď ho už máš vyhľadaný (this)? V adrese bude celý absolútny odkaz na obrázok, nie len zadaný relatívny odkaz v HTML atribúte.
Seki
Profil
_es:
Díky, předělaný kód přes this.src je o něco hezčí:
$(function() {
  $('.changer').click(function(){      
    var arr = this.src.split("/");
    /*alert(arr[arr.length - 1]); */

    if(arr[arr.length - 1] == "star_none.png"){
      this.src = "star.png";
    }
    else {
      this.src = "star_none.png";
    }
    return false;
  });
});
Ovšem split tam musím mít stále, jelikož projekt bude často migrovat a budou migrovat i ty cesty, takže potřebuju pracovat opravdu jen s názvy souborů :)
Chamurappi
Profil
Reaguji na Sekiho:
Jestli se v jq2.js nachází jQuery 2.0, tak to nefunguje ve více prohlížečích a nebude fungovat ani v desítce přepnuté do nižšího režimu.

$("#" + id).attr('src')
Proč zjišťuješ atribut src? On ho snad nastavuje i někdo jiný, než ty? Když přejmenuješ obrázek, tak ho budeš muset měnit na kolika místech? Proč si nezapamatuješ stav raději někde bokem?
Seki
Profil
Chamurappi:
# v jq2.js je jQuery JavaScript Library v1.10.2
# když přejmenuju obrázek tak ho budu měnit jenom na jednom místě....ale stejný obrázek bude mít každá položka v menu. Obrázek bude sloužit k přidání do oblíbených nebo k odebrání z oblíbených.
_es
Profil
Seki:
Čo tak:
if(this.star = !this.star) this.src = "star.png";
else this.src = "star_none.png";

Vaše odpověď

Mohlo by se hodit

Neumíte-li správně určit příčinu chyby, vkládejte odkazy na živé ukázky.
Užíváte-li nějakou cizí knihovnu, ukažte odpovídajícím, kde jste ji vzali.

Užitečné odkazy:

Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: