0

我对 jquery 比较陌生，并且试图在每次单击时更改 js 手风琴上的向上和向下箭头，不幸的是，我遇到了一个错误，它只有在我 console.log 一个错误的变量时才有效。当我 onclick="embiggen(1)" 时，是否有人对我可能做错了什么有任何指导，例如，如果它的手风琴 id 是一个？

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

}
4

2 回答 2

3

坏的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) {}

真值/假值

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

一种可能更简单的方法

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

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

然后，您不再需要在每次调用该函数时都创建一个新的#downarrow/元素。#uparrow如果所述箭头附加了 JS 行为，您可以if使用hasClass().

于 2013-05-29T02:11:50.590 回答
0

它之所以有效，是因为发生错误时，JavaScript 会跳过函数体的其余部分。

您的问题是该函数arrowdown()创建#downarrow+id，使下一个条件为真并调用该函数arrowup()。

您要么需要一个替代分支，使用Fabricio 的 answer，要么在对 DOM 进行更改后立即返回，否则会更改状态：

function embiggen(id) {
    if ($('#uparrow'+id).length) {
        return arrowdown(id);
    }
    if ($('#downarrow'+id).length) {
        return arrowup(id);
    }
    // ehm, something else happened?
}
于 2013-05-29T02:13:08.343 回答