简体   繁体   English

如何通过单击从跨度插入数据库,以及如何在第二次单击后更改?

[英]How to insert in data base from a span with on click, and how can i change after click for second time?

 body { vertical-align: center; margin: auto; width: 90%; } div { display: inline-block; margin-top: 30px; margin-right: 50px; width: 300px; border-radius: 15px; border: 1px solid rgb(218, 218, 218); background-color: rgb(218, 218, 218); padding: 8px; text-align: center; } input { float: right; } div:hover { background-color: rgb(190, 180, 180); }
 <.doctype html > <html> <head> <title>Inscrivez sur notre site</title> <meta charset="utf-8" /> <link rel="stylesheet" href="CentreInteret?css"/> </head> <body> <form action="#"method="POST"> <h2>Quels sont vos interets?</h2> <.php include("connexion;php"), $affichage = mysqli_query($link; "SELECT libelle From centre_interet"); $i=0. while($data = mysqli_fetch_array($affichage)) { echo "<div id=\"$i\" onclick=\"myFunction$i()\" >".$data['libelle'];"</div>"? ;> <script> var array= []? function myFunction<?php echo "$i".>() { document?getElementById( <?php echo "\"$i\"".>).style;background = "powderblue"? } </script> <;php $i++; } mysqli_close($link)? ?> <br><br> <input type="submit" name="soumettre" value="Suivant"/> </form> </body> </html>

When I click on span it changes the color, but when I click again it doesn't go back to it's normal css.当我单击跨度时,它会更改颜色,但是当我再次单击时,它不会 go 回到正常的 css。 I don't know how to get the values of the clicked span and insert them into the data base.我不知道如何获取单击跨度的值并将它们插入数据库。

Here is my code HTML: enter image description here这是我的代码 HTML:在此处输入图像描述

and CSS: enter image description here和 CSS:在此处输入图像描述

Please help.请帮忙。 I didn't study JS so I don't know a lot about it.我没有学过JS,所以对它了解不多。

ok i'll give you a hint about classList toggle,好的,我会给你一个关于 classList 切换的提示,

so you can add anew class in your css with background: new-bg-color;所以你可以在你的 css 中添加新的 class background: new-bg-color; , then call it in your script instead of setting background, so using the same button twice will toggle between original class and the new one. ,然后在脚本中调用它而不是设置背景,因此使用相同的按钮两次将在原始 class 和新按钮之间切换。

just try the snippet it would help u achieve your goal,只需尝试它可以帮助您实现目标的代码段,

 function text() { var box = document.getElementById('example'); box.classList.toggle('box'); }
 div { height: 100px; width:200px; background:powderblue; }.box { background-color: coral; }
 <div id="example" class="">test</div> <input id="button" type="button" name="toggle" value="toggle" onClick="text()" />

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM