Alguns dias atrás, quando eu estava escrevendo o código JS de front-end no trabalho, encontrei um elemento Traversal e adicionei um evento de clique. Foi esse problema que me fez ajustá -lo a tarde toda. Por fim, fui para casa do trabalho e pesquisei as informações on -line para descobrir como resolvê -las. (PS: eu também li o conteúdo dos programas de processamento de ligação ao loop na quarta edição do "JQuery Basic Tutorial". Acho que não o li com cuidado na época, então não me lembrei.)
Se o grande mestre conhece esse tipo de situação, ele pode fechar a janela e escrevê -las principalmente para o novato como eu. Obrigado!
Vamos postar os exemplos errados primeiro para que todos vejam. (JQuery é usado no exemplo, importe a biblioteca jQuery)
A cópia do código é a seguinte:
<! Doctype html public "-// w3c // dtd xhtml 1.0 transitional // pt" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-bransitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
<title> Manipulador de ligação ao loop </title>
<script src = "js/jQuery-2.1.1.min.js"> </script>
<script type = "text/javascript">
$ (function () {
for (var i = 1; i <= 4; i ++) {
$ ("#btn"+i) .get (0) .OnClick = function () {
alerta (i);
}
}
});
</script>
</head>
<Body>
<botão id = "btn1"> botão 1 </button>
<botão id = "btn2"> botão 2 </botão>
<botão id = "btn3"> botão 3 </button>
<botão id = "btn4"> botão 4 </button>
</body>
</html>
Após a execução deste código, clique no botão e os dados exibidos no alerta pop-up são exibidos. Eu sempre pensei que os botões 1 a 4 e os números correspondentes no alerta também são de 1 a 4. Se você acha que sim, você está errado.
Clique em cada botão e o número 4 é exibido no alerta. Eu não esperava!
Agora escreva algumas soluções para sua referência!
O primeiro tipo é escrever uma função e retornar uma função nesta função
A cópia do código é a seguinte:
<script type = "text/javascript">
$ (function () {
for (var i = 1; i <= 4; i ++) {
$ ("#btn"+i) .get (0) .OnClick = btnClick (i);
}
});
var btnclick = function (value) {
Return function () {
alerta (valor);
}
}
</script>
O segundo tipo: use a expressão da função de chamada imediatamente
(função (valor) {
// bloco de código
}) (i) // Isso é para chamar a expressão de função imediatamente
A cópia do código é a seguinte:
<script type = "text/javascript">
$ (function () {
for (var i = 1; i <= 4; i ++) {
$ ("#btn"+i) .get (0) .OnClick = (function (value) {
Return function () {
alerta (valor);
} })(eu);
}
});
</script>
O terceiro tipo: cada função usando jQuery
A cópia do código é a seguinte:
<script type = "text/javascript">
$ (function () {
$ .ECH ([1,2,3,4], função (índice, valor) {
$ ("#btn"+valor) .get (0) .OnClick = function () {
alerta (valor);
}
});
});
</script>
O uso das três situações acima pode evitar essa situação no início.
onde get (0) refere -se à conversão de um objeto jQuery em um objeto DOM.
O exposto acima é o meu entendimento pessoal do manipulador de ligação ao loop no fechamento do JS. Vou compartilhar com você. Espero que seja útil para meus amigos.