Closure et Evènement

Version imprimable

Bonjour

J'aimerais en JS créé 4 boutons et lorsque je clique sur le bouton 2 par exemple, qu'il m'affiche 2 dans une alerte

Voici le code effectué
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 <!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <title>Test</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script type="text/javascript" src="slider.js" charset="utf-8"></script> </head> <body> <div id="ap"></div> </body> </html>
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 $(document).ready(function() { $("#ap").fn_ap(); }); $.fn.fn_ap = function() { var that = this; var nbSlide = 4; var current = 0; for (var i = 0; i < nbSlide; i++) { var numero = $('<div>'+(i+1)+'</div>').appendTo(that); numero.css({display:'inline-block', textAlign:'center', height:'30px', width:'30px', lineHeight:'30px', lineWidth:'30px', color:'white', backgroundColor:'gray', marginRight:'10px' }); $( document ).on("click", numero, function (num) { return function () { alert(num); }; }(i)); } }
Evidemment, ce code ne fonctionne pas. Quand je clique, meme en dehors des 4 boutons, il m'affiche 0 puis 1 puis 2 puis 3

Je souhaiterais d'une part que le code ne s'active que sur le click du bouton (numero dans le code) et d'autre part qu'il n'affiche que la position de l'élément cliqué

Surement un cas classique mais je patauge

Merci de votre aide

FranckJ21

ceci peut-être?

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
$(document).ready(function() {
	$("#ap").fn_ap();
});
 
$.fn.fn_ap = function() { 
 
	var that = this;
	var nbSlide = 4;
	var current = 0;
 
	for (var i = 1; i <= nbSlide; i++) {
		var numero = $('<div id="_'+i+'" class="button">'+i+'</div>').appendTo(that);
		numero.css({display:'inline-block', textAlign:'center', height:'30px', width:'30px', lineHeight:'30px', lineWidth:'30px', color:'white', backgroundColor:'gray', marginRight:'10px' });
		$(numero).click(function (e) { alert(e.target.id.susbtr(1)); });
	}
}

24/09/2015, 07h29
FranckJ21

Malheureusement, ce code ne déclenche pas le click du tout

jour

en javascript + dom c'est de cette façon que l'on procède

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<html>
<head>
<style type="text/css">
 
body{background-color:gray;}
</style>
<script>
 
function teste(){
 
	var nbSlide = 4;
 
	for (var i = 0; i < nbSlide; i++) {
		var numero = document.createElement("div");
		numero.textContent=i+1
		numero.style.cssText="cursor:pointer;display:inline-block;textAlign:center;height:30px;width:30px;lineHeight:30px;lineWidth:30px;color:white;backgroundColor:gray;marginRight:10px"
		numero.setAttribute("onclick","alert("+i+")");
		document.body.appendChild(numero)
	}
}
</script>
</head>
<body>
<input type="button" onclick="teste()">charger</input>
</body></html>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<!DOCTYPE html>
<html lang="fr" dir="ltr">
<head>
  <meta http-equiv="cache-control" content="public, max-age=60">
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1.0">
  <meta name="author" content="Daniel Hagnoul">
  <title>Test</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/sunny/jquery-ui.min.css">
  <style>
 
  </style>
</head>
<body>
 
  <div id="ap"></div>
 
  <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
  <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <script>
    "use strict";
 
    $.fn.dvjhNum = function( ){
      var
        nbSlide = 4,
        current = 0,
        jObj = $( "<button/>", {
          "data-num" : "-1",
          "css" : {
            "display" : "inline-block",
            "text-align" : "center",
            "height" :"30px",
            "width" :"30px",
            "line-height" : "30px",
            "line-width" : "30px",
            "color" : "white",
            "background-color" : "gray",
            "margin-right" : "10px"
          },
          "click" : function( event ){
            alert( $( this ).data( "num" ) );
          }
        });
 
 
      return this.each( function( i, item ){
        for ( current = 1; current <= nbSlide; current++ ){
          jObj
            .clone( true, true)
            .text( current )
            .data( "num", current )
            .appendTo( item );
        }
      });
    };
 
    $( function(){ // forme abrégée de $(document).ready( function( ){      
 
      $("#ap").dvjhNum();
 
    });
 
    $( window ).load( function(){
 
    });
  </script>
</body>
</html>

24/09/2015, 12h11
FranckJ21

Merci danielhagnoul, le passage par un .data répond à ma demande