Discussion :

[eiffel-mtl]

Bonjour,

J'ai un switch box (ON/OFF) et j'aimerais afficher les données en fonction que le switch est à ON ou à OFF.

Présentement mon switch affiche ou non un DIV, mais tant qu'à avoir une BD mieux vaut l'utiliser au lieu d'afficher ou non un div.

Voici mon 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
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
// Div à afficher ou non
<div id="description1" style="display:none"><?php echo '<p>'.$row["description1"].'</p>'; ?></div>
<div id="description2" style="display:block"><?php echo '<p>'.$row["description2"].'</p>'; ?></div>
 
// Switch Box
	<label class="switch">
		<input type="checkbox" onclick="change()">
		<span class="slider round">
			<h1 id="light-text" style="display:none">ON</h1>
			<h1 id="on" style="position:relative;left:-85px;bottom: 25px;font-size:18px;">On</h1>
			<h1 id="off" style="position:relative;left:70px;bottom: 65px;font-size:18px;">OFF</h1>
		</span>
	</label>
 
// Code Javascript
<script>
function change() {
	var x = document.getElementById("light-text");
	  var description1 = document.getElementById("description1");
  var description2= document.getElementById("description2");
	if (x.innerHTML === "ON") {
		x.innerHTML = "OFF";
		    description1.style.display = "block";
	description2.style.display = "none";
	} else {
		x.innerHTML = "ON";
		    description1.style.display = "none";
	description2.style.display = "block";
	}
 
} 
</script>

Qui serait en mesure de me donner, ou m'aiguiller, vers une solution?

Merci

[mathieu]

je pense que c'est plus une question pour le forum javascript.
d'ailleurs, j'ai testé le code javascript et j'ai l'impression qu'il fonctionne déjà comme vous le souhaitez.

[eiffel-mtl]

Je sais qu'il fonctionne tel quel, ce que je voudrait c'est qu'au lieu d'afficher un div et d'en cacher un à chaque fois, ce soit par exemple:

Code :

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

1
2
3
4
5
if (x.innerHTML === "$row[data1]") {
		x.innerHTML = "$row[data2]";
} else {
		x.innerHTML = "$row[data1]";
	}

Et mon script fonctionne à moitié. Si j'ai une boucle, ça fonctionne que sur le premier:

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
<?php
		   // Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
 
$sql = "SELECT * FROM myTable";
$result = $conn->query($sql);
while($row = mysqli_fetch_array($result))
{ ?>
<?php echo '<div id="'.$row["urlName"].'content">'; ?>
 
                                    <ul>
                                        <li>
                                            <div class="item">
                                                <div class="text-content">
												<h4><?php echo $row["title"] ?>
<div id="description1" style="display:none"><?php echo '<p>'.$row["description1"].'</p>'; ?></div>
<div id="description2" style="display:block"><?php echo '<p>'.$row["description2"].'</p>'; ?></div>
 
	<label class="switch">
		<input type="checkbox" onclick="change()">
		<span class="slider round">
			<h1 id="light-text" style="display:none">ON</h1>
			<h1 id="on" style="position:relative;left:-85px;bottom: 25px;font-size:18px;">On</h1>
			<h1 id="off" style="position:relative;left:70px;bottom: 65px;font-size:18px;">OFF</h1>
		</span>
	</label>
 
												</div>
											</div>
										</li>
									</ul>
			</div>
 
 
 
<?php }
 $conn->close();
?> 
 
 
 
 
<script>
function change() {
	var x = document.getElementById("light-text");
	  var measurementImperial = document.getElementById("measurementImperial");
  var measurementMetric = document.getElementById("measurementMetric");
	if (x.innerHTML === "Metric") {
		x.innerHTML = "Imperial";
		    measurementImperial.style.display = "block";
	measurementMetric.style.display = "none";
	} else {
		x.innerHTML = "Metric";
		    measurementImperial.style.display = "none";
	measurementMetric.style.display = "block";
	}
 
} 
</script>

[mathieu]

pour la boucle, ça sera pour une 2e partie.
déjà je n'ai pas compris la différence entre mettre les données dans le code html ou les données dans le code javascript ?

[eiffel-mtl]

Ce qui fonctionne: le JavaScript met un div à none ou à block tandis ce que je veux faire c'est: si le switch est à on, affiche la valeur1 de la Bd et si c'est à off, ce sera la valeur2 toujours dans le même div.

[mathieu]

le code de votre 1er message fait bien cela, je ne comprends toujours pas où est le souci.