$(selector).click() passage de variables

**Ricksis** · 06/11/2020, 12h02

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 html :

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

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">

**NoSmoking** · 06/11/2020, 18h20

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

Code :

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

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

**Ricksis** · 07/11/2020, 07h33

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

**Ricksis** · 07/11/2020, 11h13

Re bonjour, ben ça marche pas

ceci dit ...

Code :

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

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

**Toufik83** · 07/11/2020, 16h45

Bonjour,

Le code n'est pas bon

.

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

Code :

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

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

**NoSmoking** · 07/11/2020, 19h03

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.

**Ricksis** · 08/11/2020, 05h52

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

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
 <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;">

**NoSmoking** · 08/11/2020, 10h27

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 html :

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

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 :

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
$(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 !

**Ricksis** · 09/11/2020, 07h15

Bonjour,
Bon, je laisse tomber

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

Merci pour tout

Amicalement Rick

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
 
  <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>

**NoSmoking** · 09/11/2020, 08h44

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 :

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

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.

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 !

**Ricksis** · 09/11/2020, 11h56

Code :

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

$(idCible)

est en fait équivalent à

Code :

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

$(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.

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

**Ricksis** · 09/11/2020, 12h19

je vous donne

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
 <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 html :

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
<!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 html :

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
<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

, mais ça marche

Encore une fois merci
Amicalement Rick

**NoSmoking** · 09/11/2020, 15h13

Dans ton code :

Code :

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

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

et équivalent à :

Code :

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

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

ou encore à

Code :

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

const idCible = this.id;

il suffit d'ajouter les guillemets sur l'injection

Code :

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

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

**Ricksis** · 16/11/2020, 10h37

Bonjour,

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

$(selector).click() passage de variables

jQuery

Discussions similaires

Partager

Partager