javascript conditional nicht erreichen sonst

Question

Ich arbeite an der Erstellung einer Toggle-Funktion zu "Favorit" ein Element aus einer Liste von vielen. Ich habe ein funktionierendes Skript, um das Element in eine benutzerspezifische Favoritenliste ein- und auszublenden, diese Änderung an eine Datenbank zu übermitteln und den Rest der Website entsprechend aufzufüllen. Das alles funktioniert gut, es ist hauptsächlich PHP und Ajax. Allerdings ist mein Javascript ass. Ich bin auf einer Bedingung fest, um das Symbol von einem gefüllten Herzen zu einem leeren zu ändern. Aus irgendeinem Grund erreicht es nie die else-Anweisung, selbst wenn die if-Anweisung falsch ist. Wenn ich die Bedingungen umkehre, handhabt es immer noch, wenn es gut ist, aber nie das andere.

das Bild:

<img src="includes/icons/fave-<?php echo $favStatus; ?>.png" id="faveToggle" class="faveIcon" onClick="toggleFave()"> 

die bedingte, in toggleFave() ist:

if(document.getElementById('faveToggle').src.toString().indexOf("fave-false.png")){ 
    document.getElementById('faveToggle').src = "includes/icons/fave-true.png"; 
} else { 
    document.getElementById('faveToggle').src = "includes/icons/fave-false.png"; 
} 

Also, uhh, whuddo ich tun?

Answer 1

indexOf gibt den 0-basierten Index zurück, in dem der Teilstring gefunden wird, oder -1, wenn nicht. -1 geschieht zufällig "truthy".

Das bedeutet, Sie haben zwei Möglichkeiten, es ist entweder in der Zeichenfolge und hat eine positive (truthy) Position, oder es ist nicht und Sie erhalten eine truthy -1. So oder so, es wird immer in den ersten Block gehen. Sie wollen:

if(document.getElementById('faveToggle').src.toString().indexOf("fave-false.png") > 0){ 

Answer 2

Sie müssen nur einmal das Element holen:

var toggle = document.getElementById("faveToggle"); 
if (toggle.src.indexOf("fave-false.png") >= 0) { 
    toggle.src = "includes/icons/fave-true.png"; 
} 
else { 
    toggle.src = "includes/icons/fave-false.png"; 
} 

Die .indexOf() Funktion die Position des gesuchten für String zurückgibt, oder -1, wenn sie nicht gefunden wird.

Answer 3

Sie können den Operator bitwise not~ zur Überprüfung verwenden.

~ ist ein bitwise not operator. Es ist perfekt für den Einsatz mit indexOf(), weil indexOf zurück, wenn der Index 0 ... n und wenn nicht -1 gefunden:

value ~value boolean 
-1 => 0 => false 
    0 => -1 => true 
    1 => -2 => true 
    2 => -3 => true 
    and so on 

if(~document.getElementById('faveToggle').src.toString().indexOf("fave-false.png")){ 

Answer 4

Sie checkif ist, kann es mehr als -1

if(document.getElementById('faveToggle').src.toString().indexOf("fave-false.png")>-1){ 
alert('1') 
document.getElementById('faveToggle').src = "includes/icons/fave-true.png"; 
} else { 
alert("2") 
    document.getElementById('faveToggle').src = "includes/icons/fave-false.png"; 
} 

jsfiddle

Answer 5

Hier ist meine Sim plified Version mit einem ternary operator:

var toggle = document.getElementById('faveToggle'), 
    newState = toggle.src.toString().indexOf("fave-false.png") == -1 ? true : false; 

toggle.src = "includes/icons/fave-"+newState+".png";