11521 sujets

JavaScript, DOM et API Web HTML5

Faire fonctionner une fonction sur plusieurs images

Bonjour, j'ai une page pour les news. Pour chaque new il faut cliquer sur un cadre avec la date et le titre. A côté du titre il y a une flèche vers le bas. Quand on clique dessus la flèche se retourne vers le haut. Le problème c'est que seul la première fleche est impactée par la fonction que la retourne même si on clique sur les autres cadres.
<?php
	session_start();
	$titre="News";
	$balises = true;
	include("../includes/identifiants.php");
	include("../includes/debut.php");
?>
<head>
	<link rel="stylesheet" type="text/css" href="css/news.css">
	<script type="text/javascript" src="js/jquery-3.2.1.js"></script>
	<script src="js/defilleNews.js"></script>
	<script src="js/changFleche.js"></script>
</head>
<body style="margin-top: 3.5%;">
<?php
	$query=$db->prepare('SELECT id, date, titre, nouvelle FROM news ORDER BY id DESC ');
	$query->execute();
if ($query->rowCount()>0)
	{
		while ($data = $query->fetch())
		{
			echo '
			<article class="new">
				<div class="toggle-info" onclick="flecheBasHaut()">
					<table border="1" id="tableau">
						<tr>
							<td id="date">Datée du '.$data['date'].'</td>
							<td id="titre">'.$data['titre'].'<img src="images/flecheverslebas.png" id="flechehaut" style="display:inline;"/><img src="images/flecheverslehaut.png" id="flechebas" style="display:none;"/></td>
						</tr>
					</table>
				</div>
				<div class="info-panel">'.$data['nouvelle'].'</div>
			</article>';
		}
	}
	else
	{
		echo '<p>Il n\'y pas de nouvelles</p>';
	}
	$query->CloseCursor();
?>
</body>

La fonction qui déroule le texte :
$(function() {
  $(".toggle-info").on("click", function() 
  {
    $(this).next(".info-panel").slideToggle(200);
  });
  $(".info-panel").on("click", function() 
  {
    $(this).slideUp(200);
  });
});

Le code qui change la photo pour la retourner :
function flecheBasHaut()
{
	var flecheHaut = document.getElementById('flechehaut').style.display;
	var flecheBas = document.getElementById('flechebas').style.display;
	if (flecheBas === "inline")
	{
		document.getElementById('flechebas').style.display='none';
		document.getElementById('flechehaut').style.display='inline';
	}
	else if (flecheBas === "none")
	{
	document.getElementById('flechebas').style.display='inline';
	document.getElementById('flechehaut').style.display='none';
	}
}


Merci de votre aide
Bonjour

un identifiant doit identifier un element unique sur la page.
toutes tes fleches ont le meme id, ça marche pas.
tu pourrais les numeroter.
Sujet clos
Aller à