jQuery не позволит мне делать, если блоки?

Question

Я пытаюсь сделать эффект затухания, который исчезает из div и заменяет его на другой. Для этого я создал lastDiv var, который устанавливает число последнего щелкнувшего div.

Но когда я пытаюсь установить if, если js говорит, что есть ошибка. Я уверен, что использую правильный синтаксис. (Я начинающий)

Благодаря

var lastDiv = 1; 

$("#item1").click(function() { 
    if(lastDiv == 2) { $("#div2").fadeOut(0500, function() { $("#div1").fadeIn(500, function() {lastDiv = 1;}); }); }); } 
    else if (lastDiv == 3) { $("#div3").fadeOut(0500, function() { $("#div1").fadeIn(500, function() {lastDiv = 1;}); }); }); } 


$("#item2").click(function() { 
    if(lastDiv == 1){ $("#div1").fadeOut(0500, function() { $("#div2").fadeIn(0500, function() {lastDiv = 2;}) }); }); } 
    else if(lastDiv == 3){ $("#div3").fadeOut(0500, function() { $("#div2").fadeIn(0500, function() {lastDiv = 2;}) }); }); } 


$("#item3").click(function() { 
    if(lastDiv == 1) { $("#div1").fadeOut(0500, function() { $("#div3").fadeIn(0500, function() { lastDiv = 3 }) }); } 
    else if(lastDiv == 2) { $("#div2").fadeOut(0500, function() { $("#div3").fadeIn(0500, function() { lastDiv = 3 }) }); } }); 

</script> 

Answer 1

Ваши брекеты все перепутались:
Я положил свой код через beautifier:

var lastDiv = 1; 

$("#item1").click(function() { 
    if (lastDiv == 2) { 
     $("#div2").fadeOut(0500, function() { 
      $("#div1").fadeIn(500, function() { 
       lastDiv = 1; 
      }); 
     }); 
    }); 
} else if (lastDiv == 3) { 
    $("#div3").fadeOut(0500, function() { 
     $("#div1").fadeIn(500, function() { 
      lastDiv = 1; 
     }); 
    }); 
}); 
} 


$("#item2").click(function() { 
    if (lastDiv == 1) { 
     $("#div1").fadeOut(0500, function() { 
      $("#div2").fadeIn(0500, function() { 
       lastDiv = 2; 
      }) 
     }); 
    }); 
} else if (lastDiv == 3) { 
    $("#div3").fadeOut(0500, function() { 
     $("#div2").fadeIn(0500, function() { 
      lastDiv = 2; 
     }) 
    }); 
}); 
} 


$("#item3").click(function() { 
    if (lastDiv == 1) { 
     $("#div1").fadeOut(0500, function() { 
      $("#div3").fadeIn(0500, function() { 
       lastDiv = 3 
      }) 
     }); 
    } else if (lastDiv == 2) { 
     $("#div2").fadeOut(0500, function() { 
      $("#div3").fadeIn(0500, function() { 
       lastDiv = 3 
      }) 
     }); 
    } 
}); 

Вы должны иметь Ошибка в браузере!

Answer 2

Это то, что ваш код выглядит следующим образом, при правильном отступов и новых линий:

$("#item1").click(function() { 
    if(lastDiv == 2) { 
     $("#div2").fadeOut(0500, function() { 
      $("#div1").fadeIn(500, function() { 
       lastDiv = 1; 
      }); 
     }); 
    }); 
} else if (lastDiv == 3) { 
    $("#div3").fadeOut(0500, function() { 
     $("#div1").fadeIn(500, function() { 
      lastDiv = 1; 
     }); 
    }); 
}); 
} 

Смотрите эту проблему? Часть else if проходит после закрывающего тега function() {, а не if. Это синтаксическая ошибка, о которой не говорил Javascript. Попробуйте установить FireBug, аддон для Firefox или аналогичный, чтобы вы могли видеть такие ошибки.

И, пожалуйста, не пишите этот код на одной строке. Я не знаю, как вы можете это прочитать.

Answer 3

Было довольно много синтаксических ошибок с операциями if, закрытием скобок и нечетной точкой с запятой. Я исправил их для вас и отступил от всего, чтобы было легче читать. Я также удалил начальный ноль. Я только сделал свой первый click событие, но, надеюсь, он должен немного помочь! :)

$("#item1").click(function() 
{ 
    if (lastDiv == 2) 
    { 
     $("#div2").fadeOut(500, function() 
     { 
      $("#div1").fadeIn(500, function() 
      { 
       lastDiv = 1; 
      }); 
     }); 
    } 
    else if (lastDiv == 3) 
    { 
     $("#div3").fadeOut(500, function() 
     { 
      $("#div1").fadeIn(500, function() 
      { 
       lastDiv = 1; 
      }); 
     }); 
    } 
}); 

Answer 4

Похож, что у вас есть неуместное}); там, среди пары других синтаксических проблем. Разнос вашего кода и отступов поможет вам увидеть эти типы проблем лучше:

var lastDiv = 1; 

$("#item1").click(function(){ 
    if(lastDiv == 2){ 
     $("#div2").fadeOut(0500, function(){ 
      $("#div1").fadeIn(500, function(){ 
       lastDiv = 1; 
      }); 
     }); 
    }else if(lastDiv == 3){ 
     $("#div3").fadeOut(0500, function(){ 
      $("#div1").fadeIn(500, function(){ 
       lastDiv = 1; 
      }); 
     }); 
    } 
}); 

$("#item2").click(function(){ 
    if(lastDiv == 1){ 
     $("#div1").fadeOut(0500, function(){ 
      $("#div2").fadeIn(500, function(){ 
       lastDiv = 2; 
      }); 
     }); 
    }else if(lastDiv == 3){ 
     $("#div3").fadeOut(0500, function(){ 
      $("#div2").fadeIn(500, function(){ 
       lastDiv = 2; 
      }); 
     }); 
    } 
}); 

$("#item3").click(function(){ 
    if(lastDiv == 1){ 
     $("#div1").fadeOut(0500, function(){ 
      $("#div3").fadeIn(500, function(){ 
       lastDiv = 3; 
      }); 
     }); 
    }else if(lastDiv == 2){ 
     $("#div2").fadeOut(0500, function(){ 
      $("#div3").fadeIn(500, function(){ 
       lastDiv = 3; 
      }); 
     }); 
    } 
}); 

Answer 5

Давайте предположим, что дивы имеют class="content" и интерактивные элементы имеют class="item" и атрибут data-i = n, где n составляет 1, 2, 3.

Вы можете упростить код значительно замирания все дивы контента, безусловно, хотя на самом деле, вероятно, будет утрачен только один из (другие остаются скрытыми), а затем найти правильное содержание DIV исчезать в.

$(".item").click(function() { 
    var index = $(this).data('i');//or similar - there are other possibilities here. 
    $(".content").fadeOut(500, function() { 
     $("#div"+index).fadeIn(500);//fade in the content div corresponding to the clicked item 
    }); 
}); 

Это не только исправляет вашу ошибку, но и лучше использует силу jQuery.

Answer 6

Я считаю, что это то, что вы пытаетесь сделать:

var selected = null; 
var selectors = ["#div1","#div2","#div3"]; // use any valid jquery selectors 

var selectme = function(){ 
    if (selected==this) 
     return; 

    selected = this; 

    $.each(selectors,function(key,selector){ 
     $(selector).fadeTo(300,0.2); 
    }); 

    $(selected).fadeTo(300,1); 
}; 

$(document).ready(function(){ 
    $.each(selectors,function(key,selector){ 
     $(selector).click(selectme); 
    }); 

    $(selectors[0]).click(); 
});