$(selector).click() passage de variables

Version imprimable

Je voudrais remplacer " selector " par un paramètre sur le on click du #selector, en fait ce serait un truc style ( onclick=param=id_du_selector ) et récupérer param dans $("#selector").on("click",function(){, ou selector serait param
pouvez vous m'aider ?
par avance merci ;)
amicalement, Rick

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 <script>
        $(document).ready(function(){
                $("#selector").on("click",function(){
                $("#selector").fadeIn();
                $("#selector").css({top: 0, left: 0, position:'absolute'});
                $("#selector").css('z-index', 2);
                });
                $(".btn1").click(function(){
                $("#selector").fadeOut();
          });
        });
  </script>
<map ...>
<area coords="242,763,71" shape="circ" href="#" Id="selector" alt="Stan" target="_self" onmouseover="window.status='Stan Lee ?';return true;" onclick="param=$this.id">

Bonjour,
je ne vois pas où tu veux en venir mais je me lance :

Code:

1
2
3
4
$("#selector").on("click", function() {
  console.log(this.id); // tu récupères le nom du selecteur ici "selector"
  console.log($(this)); // tu récupères l'objet jQuery qui a été cliqué
});

07/11/2020, 07h33
Ricksis

Bonjour, et merci pour la réponse, je vais tester et je vous tien au courant ;)

RE : $(selector).click() passage de variables

Re bonjour, ben ça marche pas :(
ceci dit ...

Code:

1
2
3
4
5
6
7
 
 <script>
	$(document).ready(function(){
		$(".Area").on("click",function(GetId){
		alert('"#' + GetId.target.id + '"'); // fonctionne, resultat  "#MonDivId" :)
		$('"#' + GetId.target.id + '"').fadeIn(); // ne fonctionne pas :(
		$('"#' + GetId.target.id + '"').css({top: 0, left: 0, position:'absolute'}); // ne fonctionne pas :(

Une idée ?
Merci de votre attention
Amicalement Rick

Bonjour,

Le code n'est pas bon :nono:.

Utilises this dans la fonction click et simplifies le code avec la syntaxe de chaînage (en une seule ligne) :
Code:

1 2 3 4 5 6 7 $(document).ready(function(){ $(".Area").on("click",function(){ alert(" id :"+$(this).attr("id")); $(this).fadeIn().css({top: 0, left: 0, position:'absolute'}); }); });

07/11/2020, 19h03
NoSmoking

Citation:

Envoyé par Ricksis

Re bonjour, ben ça marche pas :(

et si tu précisais ce que tu veux faire, donne peut-être son code HTML.

RE : $(selector).click() passage de variables

Bonjour,
en gras ce que je voudrais obtenir dynamiquement en fonction de l'area clicqué
Merci
Amicalement, Rick ;)

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 <script>
	$(document).ready(function(){
		$(".Area").on("click",function(){
		$("#StanDiv").fadeIn().css({top: 0, left: 0, position:'absolute'});
		});
		$(".btn1").click(function(){
		$("#StanDiv").fadeOut();
	  });
	});
  </script>
</head>
<body>

<div>
	<img id="Avengers" class="Avengers" src="img/Avengers.png" usemap="#Map">
		<map name="Map">
		<area coords="242,763,71" shape="circ" href="#" Id="StanLee" alt="Stan Lee" class="Area" target="_self" onmouseover="window.status='Stan Lee ?';return true;">
		<area coords="252,478,373,516"  shape="rect" href="#" id="NickFury" alt="Nick Fury"   class="Area"  target="_self" onmouseover="window.status='Nick Fury ?';return true;">

En gros si je comprends bien tu veux en ayant cliqué sur une <img>, donc activer l'<area> correspondante, afficher un élément d'une certaine ID et donc c'est cette ID que tu souhaites récupérer.

En prenant l'exemple du HTML suivant :
Code:

1 2 3 4 5 6 7 8 9 <div id="html-div">HTML</div> <div id="css-div">CSS</div> <div id="js-div">JS</div> <img usemap="#map-image" src="nom-de-l-image.png" alt=""> <map name="map-image"> <area id="html" ...> <area id="css" ...> <area id="js" ...> </map>
on pourrait envisager le code suivant :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 $(function() { $("area").on("click", function(e) { e.preventDefault(); // on masque tous les éléments dont l'ID se termine par "-div" $("div[id$='-div']").fadeOut(); // récup. de l'ID cible const elem = e.target; const idCible = "#" + elem.id + "-div"; // on fait ce que l'on veut avec l'élément $(idCible).fadeIn().css({ top: 0, left: 0, position: 'absolute' }); }); });
Tu avais quand même les éléments pour y arriver, c'est ton approche qui était approximative, sous réserve que cela soit ce que tu cherches à faire bien sûr !

RE : $(selector).click() passage de variables

Bonjour,
Bon, je laisse tomber :(
Mais c'est pas grave j'ai une autre solution ;)
Merci pour tout ;)
Amicalement Rick

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 
  <script>
	$(document).ready(function(){
		$(".Area").on("click",function(e){
		e.preventDefault();
		// récup. de l'ID cible
		const elem = e.target;
		const idCible = '"#'+elem.id+'"';
		alert(idCible);       // fonctionne ;)
		$(idCible).fadeIn().css({top: 0, left: 0, position:'absolute'});     // ne fonctionne plus :(
		$("#HeroeImg").append("<b>Appended text</b>");
		$("#HeroeTxt").append("<b>Appended text</b>");
		});
		$(".btn1").click(function(e){
		e.preventDefault();
		// récup. de l'ID cible
		const elem = e.target;
		const idCible = '"#'+elem.id+'"';
		alert(idCible);
		$(idCible).fadeOut();
	  });
	});
  </script>

Citation:

Bon, je laisse tomber :(

Dommage car je n'ai toujours pas compris quel est ton véritable besoin !

Si je prend ce morceau de ton code :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 $(".Area").on("click", function(e) { e.preventDefault(); // récup. de l'ID cible const elem = e.target; const idCible = '"#' + elem.id + '"'; alert(idCible); // fonctionne ;) $(idCible).fadeIn().css({ top: 0, left: 0, position: 'absolute' }); // ne fonctionne plus :( $("#HeroeImg").append("<b>Appended text</b>"); $("#HeroeTxt").append("<b>Appended text</b>"); });
$(idCible) est en fait équivalent à $(this) l'objet jQuery sur lequel tu as cliqué et qui donc est visible, vouloir le faire apparaître ne rime donc pas à grand chose.

Citation:

Mais c'est pas grave j'ai une autre solution ;)

Donc tant mieux, même si on aurait aimé la connaître, cela peut toujours être intéréssant !

09/11/2020, 11h56
Ricksis

Code:

$(idCible)

est en fait équivalent à

Code:

$(this)

l'objet jQuery sur lequel tu as cliqué et qui donc est visible, vouloir le faire apparaître ne rime donc pas à grand chose.

Citation:

Donc tant mieux, même si on aurait aimé la connaître, cela peut toujours être intéressant !

Salut, j'ai " ma solution ", en JQuery et PHP, et je la posterai ;)
en attendant, ( $this ) ne fonctionne pas :(
quoiqu'il en soit vous m'avez bien aidé ;)
Merciiiiii
Amicalement Rick

RE : $(selector).click() passage de variables

je vous donne

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 <script>
	$(document).ready(function(){
		$(".Area").on("click",function(GetId){
		$("#StanHeader").empty();
		$("#HeroeImg").empty();
		$("#HeroeTxt").empty();
		GetId.preventDefault();
		// récup. de l'ID cible
		const elem = GetId.target;
		const IdCible = '"' + elem.id + '"';
		$("#StanDiv").fadeIn().css({top: 0, left: 0, position:'absolute'});
		$("#StanHeader").append('<b>[php] ' + IdCible + '</b>');
		$("#HeroeImg").append("<b>[php]</b>");
		$("#HeroeTxt").append("<b>[php]</b>");
                // ...
		});
		$(".btn1").click(function(){
		$("#StanHeader").empty();
		$("#StanDiv").fadeOut();
	  });
	});
  </script>

ma solution :)

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
<!doctype html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <title>The Avengers fan Page</title>
 
  <link rel="stylesheet" href="">
 
  <script src=""></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
 
  <style>
  .Avengers{
        top: 0;
        left:0;
        Width: 100%;
        height: auto;
  }
  #StanDiv {
        background-color: white;
        display: none;
        width: 80%;
        margin-left: 10%;
        margin-top: 5%;
        border-style: outset;
        border-width: thick;
        border-color: silver;
        border-radius: 5px;
        padding: 5px;
  }
  #HeroeImg{
        width: 30%;
        height: auto;
        border: 1px solid black;
        float: left;
  }
  #HeroeTxt{
        width: 68%;
        height: auto;
        border: 1px solid black;
        float: right;
  }
  </style>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div>
	<img id="Avengers" class="Avengers" src="img/Avengers.png" usemap="#Map">
		<map name="Map">
		<area coords="242,763,71" shape="circ" href="#" Id="Stan Lee" alt="Stan Lee" class="Area" target="_self" onmouseover="window.status='Stan Lee ?';return true;">
		<area coords="252,478,373,516"  shape="rect" href="#" id="Nick Fury" class="Area" alt="Nick Fury" target="_self" onmouseover="window.status='Nick Fury ?';return true;">...
 
<div id="StanDiv">
	<span Id="StanHeader" style="width: 95%;"></span><a href="#" class="btn1"><img id="retour" src="img/close.png" style="float: right;"><a>
	<br>
	<br>
	<div id="HeroeImg"></div>
	<div id="HeroeTxt"></div>
	<br>
	<br>
	<span id="StanFooter"><a href="#" class="btn1"><img id="retour" src="img/close.png" style="float: right;"><a></span>
</div>

c'est sûrement tordu :D, mais ça marche :D
Encore une fois merci
Amicalement Rick

09/11/2020, 15h13
NoSmoking
Dans ton code :
Code:

1 2 3 // récup. de l'ID cible const elem = GetId.target; const IdCible = '"' + elem.id + '"';
et équivalent à :

Code:

const idCible = $(this).attr("id");

ou encore à

Code:

const idCible = this.id;

il suffit d'ajouter les guillemets sur l'injection

Code:

$("#StanHeader").html('<b>[php] "' +IdCible +'"</b>'); // cela t'évites de faire un empty() avant
16/11/2020, 10h37
Ricksis

Bonjour,

Citation:

Donc tant mieux, même si on aurait aimé la connaître, cela peut toujours être intéressant !

je pense avoir donné " ma solution ", mais je vous suis reconnaissant de l'attention que vous m'avez portée, encore merci ;)

Amicalement, Rick