La fonction jQuery ne fonctionne pas

Question

$("#trigger-1").click(function() { 
    $("#secondary").animate({ width: 0 }); 
    $("#primary").animate({ width: '100%' }); 
    $("#panel-1").css({ display: "block" }).animate({ 
     height: 200, 
     width: '100%', 
     opacity: 1 
    }); 
    return false; 
}); 
$("#trigger-2").click(function() { 
    $("#secondary").animate({ width: 0 }); 
    $("#primary").animate({ width: '100%' }); 
    $("#panel-2").css({ display: "block" }).animate({ 
     height: 200, 
     width: '100%', 
     opacity: 1 
    }); 
    return false; 
}); 
$("#return").click(function() { 
    alert(1); 
    $("#primary").animate({ width: '60%' }); 
    $("#secondary").animate({ width: '40%' }); 
    $(".panel").animate({ 
     height: 0, 
     width: 0, 
     opacity: 0 
    }); 
    return false; 
}); 

Le retour ne fonctionne pas pour panel-2. S'il vous plaît vérifier ce violon: http://jsfiddle.net/HTVXv/ Aussi, s'il vous plaît me guider s'il est possible de refactoriser et de réduire le code.

Merci!

Answer 1

Il n'est pas étonnant que les ID soient uniques, vous ne pouvez donc pas les utiliser deux fois.

Une solution est d'utiliser une classe, comme class="return" et $(".return").click()

Answer 2

L'attribut "id" doit être unique sur la page; vous essayez de donner aux deux liens "Return" l'identifiant de "return", donc seul le premier a cet identifiant. Essayez d'utiliser une classe à la place.

Answer 3

Cela ne fonctionne pas parce que vous avez deux «a» avec le même identifiant. Essayez de renommer l'un d'entre eux et liez-le pour cliquer et cela fonctionnera.