Closure et Evènement

**FranckJ21** · 24/09/2015, 00h07

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**01001111** · 24/09/2015, 00h25

ceci peut-être?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**FranckJ21** · 24/09/2015, 07h29

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

**melka one** · 24/09/2015, 11h01

jour

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

**danielhagnoul** · 24/09/2015, 11h55

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

**FranckJ21** · 24/09/2015, 12h11

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

Closure et Evènement

jQuery

Vue hybride

Discussions similaires

Partager

Partager