récupération de variable dans jquery

**vladock** · 22/06/2011, 17h51

voici mon code html

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
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
69
70
71
<head>
	<meta charset="UTF-8" />
	<title>jQuery UI Dialog - Animation</title>
	<link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />
	<script type="text/javascript" src="../../jquery-1.4.2.js"></script>
	<script type="text/javascript" src="../../external/jquery.bgiframe-2.1.1.js"></script>
	<script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
	<script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
	<script type="text/javascript" src="../../ui/jquery.ui.mouse.js"></script>
	<script type="text/javascript" src="../../ui/jquery.ui.draggable.js"></script>
	<script type="text/javascript" src="../../ui/jquery.ui.position.js"></script>
	<script type="text/javascript" src="../../ui/jquery.ui.resizable.js"></script>
	<script type="text/javascript" src="../../ui/jquery.ui.dialog.js"></script>
	<script type="text/javascript" src="../../ui/jquery.effects.core.js"></script>
	<script type="text/javascript" src="../../ui/jquery.effects.blind.js"></script>
	<script type="text/javascript" src="../../ui/jquery.effects.explode.js"></script>
	<link type="text/css" href="../demos.css" rel="stylesheet" />
	<script type="text/javascript">
        // increase the default animation speed to exaggerate the effect
        $.fx.speeds._default = 1000;
        $(function() {
        var title=$(this).attr("title");
                $test=('#' + title)
                $("span").text(title);
                $($test).dialog({
                        autoOpen: false,
                        show: 'blind',
                        hide: 'explode'
                });
                
                $('a#opener').click(function() {
                        var title=$(this).attr("title");
                        $test=('#' + title)
                        $($test).dialog({
                        autoOpen: false,
                        show: 'blind',
                        hide: 'explode'
                });
                        return false;
                });
        });
        </script>
 
 
</head>
<body>
 
<div class="demo">
 
<div id="dialog" title="Page 1" style="display:none;">
	<p>Bonjour mr Bouazo je suis la page 1</p>
</div>
 
<div id="dialog2" title="Page 2" style="display:none;" >
	<p>Bonjour mr Bouazo je suis la page 2</p>
</div>
 
 
<a href="#" id="opener" title="dialog">Page 1</a>
 
<a href="#" id="opener" title="dialog2">Page 2</a>
<span></span>
</div><!-- End demo -->
 
<div class="demo-description">
 
 
 
</div><!-- End demo-description -->
 
</body>

Je souhaiterais recuperer lorsque je clic sur un de mes liens Page 1 ou Page 2
le title de la balise afin de pouvoir ouvrir avec jquey le Div qui lui correspond.

**Bovino** · 22/06/2011, 19h06

Un id doit être unique dans le document !

**vladock** · 22/06/2011, 19h31

Ok merci bien,

Mais alors que me proposez vous pour pouvoir utiliser la fonction dialogue box de jquery avec plusieurs lien sur la même page comme je l'avais précédemment

**Bovino** · 22/06/2011, 19h41

Par exemple changer les id en classes :

Code html :

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

1
2
3
<a href="#" class="opener" title="dialog">Page 1</a>
 
<a href="#" class="opener" title="dialog2">Page 2</a>

Code :

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

1
2
3
4
5
6
7
8
9
10
$('a.opener').click(function() {
	var title=$(this).attr("title");
	$test=('#' + title)
	$($test).dialog({
		autoOpen: false,
		show: 'blind',
		hide: 'explode'
	});
		return false;
});

D'autre part, à quoi correspond cette partie

Code :

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

1
2
3
4
$(function() {
    var title=$(this).attr("title");
    ...
});

???

**vladock** · 22/06/2011, 19h52

Voici tout mon code , vous pouvez l'executer pour voir ce ke ça 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
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="en">
<head>
	<meta charset="UTF-8" />
	<title>jQuery UI Dialog - Animation</title>
	<link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />
	<script type="text/javascript" src="../../jquery-1.4.2.js"></script>
	<script type="text/javascript" src="../../external/jquery.bgiframe-2.1.1.js"></script>
	<script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
	<script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
	<script type="text/javascript" src="../../ui/jquery.ui.mouse.js"></script>
	<script type="text/javascript" src="../../ui/jquery.ui.draggable.js"></script>
	<script type="text/javascript" src="../../ui/jquery.ui.position.js"></script>
	<script type="text/javascript" src="../../ui/jquery.ui.resizable.js"></script>
	<script type="text/javascript" src="../../ui/jquery.ui.dialog.js"></script>
	<script type="text/javascript" src="../../ui/jquery.effects.core.js"></script>
	<script type="text/javascript" src="../../ui/jquery.effects.blind.js"></script>
	<script type="text/javascript" src="../../ui/jquery.effects.explode.js"></script>
	<link type="text/css" href="../demos.css" rel="stylesheet" />
	<script type="text/javascript">
	// increase the default animation speed to exaggerate the effect
	$.fx.speeds._default = 1000;
	$(function() {
		$('#dialog').dialog({
			autoOpen: false,
			show: 'blind',
			hide: 'explode'
		});
 
		$('a#opener').click(function() {
			var title=$(this).attr("title");
			$test=('#' + title)
            $("span").text($test);
			$($test).dialog('open');
			return false;
		});
	});
	</script>
 
 
</head>
<body>
 
<div class="demo">
 
<div id="dialog" title="Page 1" style="display:none;">
	<p>Bonjour mr Bouazo je suis la page 1</p>
</div>
 
<div id="dialog2" title="Page 2" style="display:none;" >
	<p>Bonjour mr Bouazo je suis la page 2</p>
</div>
 
 
<a href="#" id="opener" title="dialog">Page 1</a>
 
<a href="#" id="opener" title="dialog2">Page 2</a>
<span></span>
</div><!-- End demo -->
 
<div class="demo-description">
 
 
 
</div><!-- End demo-description -->
 
</body>
</html>

concenant la partie var title=$(this).attr("title"); c'eatit pour recupere le title de mon lien afin de pouvoir ouvrir des div différents lorsque je cliquerais sur les différents lien que j'ai dans ma page

**vladock** · 22/06/2011, 19h57

O fait ce que je cherche a faire c'est :
si je clic sur Page 1 je dois voir s'afficher le contenu de la div avec l'id dialog

et si je clique sur Page 2 je dois voir s'afficher le contenu de la div avec l'id dialog2

et ainsi de suite si j'ai plusieurs lien

récupération de variable dans jquery

jQuery

Vue hybride

Discussions similaires

Partager

Partager