Afficher une image contenue dans un div en fonction de l'id

**Bensljul** · 18/12/2018, 12h01

Bonjour à tous!!

J'ai une petite question car il me reste une chose à faire pour finaliser une page web et je n'y arrive pas XD

Pour résumer, je dois faire une page qui permet d'afficher des graph en format png; dans un premier temps j'ai mis en place une sélection car ces graph sont en fonction d'un service et d'une date en format "yyyy/mm" du coup j'ai fait ca avec un bouton display:

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
<body>
	<div id="Service">
			<span id="app">
				<p>Sélectionnez un service :</p>
				<select id="select_app">
					<option>-</option>
					<option>AttributionCodeConfidentiel</option>
					<option>bis</option>
					<option>bis.xindd</option>
					<option>crs</option>
					<option>crsCavimac</option>
					<option>crsCavimac.xindd</option>
					<option>crs.xindd</option>
				</select>
			</span>
			<span id="periode">
				<p>Sélectionner une période: </p>
				<select id="select_periode">
					<option>-</option>
					<option>Annuelle</option>
					<option>Mensuelle</option>
				</select>
			</span>
			<span id="date">
				<p>sélectionner la date :</p>
				<input id="date-picker"/>
			</span>
	</div>
	<div>
		<center><button id="display">display</button></center>
	</div>

ensuite j'ai fait un div contenant les images en question :

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
<div id="aff">
		<img id="bis-global" src="bis.png"/>
		<img id="bis-2018/09" src="bis_201809.png"/>
		<img id="bis-2018/08" src="bis_201808.png"/>
		<img id="bis-2018/07" src="bis_201807.png"/>
		<img id="bis-2018/06" src="bis_201806.png"/>
		<img id="bis-2018/05" src="bis_201805.png"/>
		<img id="bis-2018/04" src="bis_201804.png"/>
		<img id="bis-2018/03" src="bis_201803.png"/>
		<img id="bis-2018/02" src="bis_201802.png"/>
		<img id="bis-2018/01" src="bis_201801.png"/>
		<img id="bis-2017/11" src="bis_201711.png"/>
		<img id="bis-2017/10" src="bis_201710.png"/>
		<img id="bis-2017/09" src="bis_201709.png"/>
		<img id="bis-2017/08" src="bis_201708.png"/>
		<img id="bis-2017/07" src="bis_201707.png"/>
		<img id="bis-2017/06" src="bis_201706.png"/>
</div>

PS : je ne vous ais mis qu'un échantillon ^^

et du coup j'ai écris ce script en jquery :

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
$(document).ready(function(){
	var periode = '',
			service = '',
			date = '',
			$btn_display = $("#display",)
			$select_app = $("#select_app"),
			$select_periode = $("#select_periode"),
			$date = $("#date-picker"),
			$img = $('#aff img'),
			$aff = $('#aff');
 
	service = $('#select_app option:selected').text();
	periode = $('#select_periode option:selected').text();
	date = $('#date-picker').text();
	$aff.hide();
	$('#Service #date').hide();
 
	$select_periode.on('change',function(){
		periode = $('#select_periode option:selected').text();
		if (periode == "Annuelle") {
			$('#Service #date').css('display', 'none');
		}
		else {
			$('#Service #date').css('display', 'block');
		}
	});
 
	$select_app.on('change',function(){
			service = $('#select_app option:selected').text();
	});
 
	$date.datepicker({
    dateFormat: 'yy/mm',
    changeMonth: true,
    changeYear: true,
		showButtonPanel: true,
		onClose: function(dateText, inst) {
			var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
			var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
			$(this).datepicker('setDate', new Date(year, month, 1));
		}
	});
 
	$btn_display.click(function(){
		var ide ="";
		service = $('#select_app option:selected').val();
		periode = $('#select_periode option:selected').val();
		date = $('#date-picker').val();
 
		if (periode === "Annuelle") {
			ide = service+"-global";
			//console.log(ide);
			$("img[id=ide]").show();
		}
		else {
			ide = service+"-"+date;
			console.log(ide);
			$("img[id=ide]").show();
		}
	});
});

et c'est la dernière partie qui me pose problème, c'est la sélection de l'attribut qui est peut être pas bonne

je vous remercie pour votre aide

**Toufik83** · 18/12/2018, 17h26

bonjour,

Code :

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

$btn_display = $("#display",)

cette virgule est une faute de frappe?

Le sélecteur jQuery que tu as mis n'est pas correcte.

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
if (periode === "Annuelle") {
	ide = service+"-global";
}
else {
	ide = service+"-"+date;
}
/* on utilise souvent un # quand on veux chercher par id . 
          faux, (mauvaise concaténation)==>$("img[id=ide]");
         donc soit $('img#'+ide)
         ou bien $('img[id='+ide+']') 
         ou encore directement avec l'id $('#'+ide)
*/
$("img#"+ide).show();//ça est correcte, et on l'écrit une seule fois ici, puisque l'image sera affiché dans les deux conditions.

en plus, tu essaie d'afficher une image qui appartient a un div caché, par-ce que tu as mis

Code :

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

$aff.hide();

un élément enfant ne peux pas être visible si son parent ne l'est pas, donc il y a plusieurs solution pour résoudre ça.
1-soit cacher les <img> au lieu de la <div id="aff">

Code :

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

$('#aff img').hide();

ou bien en utilisant la variable $aff

Code :

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

$aff.find('img').hide();

2-ou bien appliquer par exemple un style de base pour les <img> en display:'none', et laisser la div en display:'block' puis il ne reste plus qu'a afficher l'image correspondante selon le ide.

Afficher une image contenue dans un div en fonction de l'id

jQuery

Vue hybride

Discussions similaires

Partager

Partager