Afficher une image contenue dans un div en fonction de l'id
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:
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:
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:
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 :)