Question

我正致力于为喜爱的＆＃39;创建切换功能。许多列表中的项目。我已经有了工作脚本来切换项目进出用户特定的收藏夹列表，将该更改传达给数据库，并相应地填充网站的其余部分。一切正常，它主要是PHP和Ajax。但是，我的javascript是屁股。我坚持条件是将图标从饱满的心脏变为空心的。由于某种原因，即使if语句为false，它也永远不会到达else语句。如果我扭转了条件，它仍会处理if if但是从不处理其他情况。

图像是：

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

位于toggleFave（）中的条件是：

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

所以，呃，我做什么？

Answer 1

indexOf返回找到子字符串的基于0的索引，如果不是，则返回-1。 -1恰好是"truthy"。

这意味着你有两种可能性，它既可以在字符串中也可以有一个积极的（真实的）位置，或者它没有，你得到一个真正的-1。无论哪种方式，它将始终进入第一个块。你想要：

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

Answer 2

您只需要获取一次元素：

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

.indexOf()函数返回搜索到的子字符串的位置，如果找不到，则返回-1。

Answer 3

您可以使用bitwise not ~运算符进行检查。

~是bitwise not operator。它非常适合与indexOf()一起使用，因为indexOf如果找到索引0 ... n则返回，如果不是-1则返回：
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

您可以检查它是否大于-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

这是我使用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";

javascript条件没有到达其他地方

5 个答案: