为什么这个JQuery只有在我调试一个坏变量时才能工作？

Question

我对jquery比较新，并且我试图在每次点击时改变js手风琴上的向上和向下箭头，不幸的是，我遇到了一个错误，只有当我调试一个坏变量时它才有效。当我onclick =“embiggen（1）”时，有没有人对我可能做错了什么有任何指导，例如如果它的手风琴是一个？

围绕html存在一些其他问题，但具体地说，为什么这只能在我的console.log中发挥作用;？

function arrowup(id){
$('#downarrow'+id).remove();
$('#dropdown'+id).append('</a>');
$('#dropdown'+id).append('<i id="uparrow'+ id +'" class="icon-1 icon-chevron-up">');
}

function arrowdown(id){
$('#uparrow'+id).remove();
$('#dropdown'+id).append('</a>');
$('#dropdown'+id).append('<i id="downarrow'+ id +'" class="icon-1 icon-chevron-down">');
}


//Switches the arrows
function embiggen(id){

var up = $('#uparrow'+id).length;
if (up == 1){
    arrowdown(id);
    console.log(i see you);
}
var down = $('#downarrow'+id).length;
if (down == 1){
    arrowup(id);
}

}

Answer 1

错误console.log()使其“正常”，因为错误会在输入第二个if语句之前中断脚本执行。

---

解决实际问题

down == 1始终为true。您应该使用else声明：

if ($('#uparrow'+id).length){
    arrowdown(id);
} else if ($('#downarrow'+id).length){
    arrowup(id);
}

---

理解

down == 1始终为up == 1独立。以下是在两种情况下以伪代码解释的逻辑：

var up = 1, down = 0;
if (up) { down = 1; up = 0; } //enters this block, down now is 1
if (down) { down = 0; up = 1; } //enters this block as down == 1

var up = 0, down = 1;
if (up) { down = 1; up = 0; } //doesn't enter this block
if (down) { down = 0; up = 1; } //enters this block as down == 1

你刚刚放了一个else，所以执行流程不会进入第二个if语句，以防第一个成功。

if (up) {}
else if (down) {}

---

Truthy / Falsy值

解释为什么我在条件语句中使用.length隔离：在JavaScript中，数字0是一个假值，而1是真实的，因此这些可以直接使用在if语句中，它将基于内部ToBoolean算法逻辑进行解释。显然，如果您愿意，可以== 1，虽然稍微多余，但可以更清楚。

---

一种可能更简单的方法

偏离主题，但你的目标最有可能以更简单的方式实现。我可能会过度简化你的逻辑，但根据你的意图你可能只是在这两个类之间切换：

function embiggen(id) {
    $('#arrow'+id).toggleClass('icon-chevron-up icon-chevron-down');
}

然后，每次调用函数时，您不再需要创建新的#downarrow / #uparrow元素。如果所述箭头附加了JS行为，您可以使用hasClass()通过if语句检查要执行的逻辑。

Answer 2

它的工作原理是因为发生错误时，JavaScript会跳过函数体的其余部分。

您的案例中的问题是，arrowdown()函数会创建#downarrow+id，使下一个条件失效，并调用函数arrowup()。

你需要一个替代分支，使用Fabricio's answer，或者在更改DOM之后立即返回，否则会改变状态：

function embiggen(id) {
    if ($('#uparrow'+id).length) {
        return arrowdown(id);
    }
    if ($('#downarrow'+id).length) {
        return arrowup(id);
    }
    // ehm, something else happened?
}