我想在切换按钮时更改变量的值。基于此，我想通过CSS切换图标的旋转
<?php require 'steamauth/steamauth.php'; // steam connection
include("config.php"); // where the database connection is located
?>
<!DOCTYPE html>
<html lang="fr">
<head>
</head>
<body class="grey darken-3">
<?php
//////FIRST WE SET UP THE TOTAL images PER PAGE & CALCULATIONS:
$per_page = 12;// Number of images per page, change for a different number of images per page
// Get the page and offset value:
if (isset($_GET['page'])) {
$page = $_GET['page'] - 1;
$offset = $page * $per_page;
}
else {
$page = 0;
$offset = 0;
}
// Count the total number of images in the table ordering by their id's ascending:
$images = "SELECT count(id) FROM images ORDER by CreationTimestamp DESC";
$result = $bdd->query($images);
$result->execute(); //line 28 - error
$row = $bdd->fetch($result);
$total_images = $row[0];
// Calculate the number of pages:
if ($total_images > $per_page) {//If there is more than one page
$pages_total = ceil($total_images / $per_page);
$page_up = $page + 2;
$page_down = $page;
$display ='';//leave the display variable empty so it doesn't hide anything
}
else {//Else if there is only one page
$pages = 1;
$pages_total = 1;
$display = ' class="hide"';//class to hide page count and buttons if only one page
}
////// THEN WE DISPLAY THE PAGE COUNT AND BUTTONS:
echo '<div id="gallery">';// Gallery start
echo '<div class="container">';
// DISPLAY THE images:
//Select the images from the table limited as per our $offet and $per_page total:
$result = $bdd->prepare( "SELECT * FROM images ORDER by CreationTimestamp DESC LIMIT $offset, $per_page");
$row_count=0;
$col_count=0;
while($row = $bdd->fetch($result)) {//Open the while array loop
if($row_count%4==0){
echo "<div class='row'>";
$col_count=1;
}
//Define the image variable:
$image=$row['image'];
echo '
<div class="col s12 m3">
<img class="materialboxed" data-caption="'.$title.' par '.$steamname.'" src="'.$wURL.'assets/img/gallery/'.$image.'" style="width:100%;height:100%;">
</div>';// echo image from the database
if($col_count==4){
echo "</div class='row'>";
}
$row_count++;
$col_count++;
}
echo '</div>';
echo '</div>';
echo '<div class="clearfix"></div>';
?>
</div>
<div class="card-action grey darken-4 center-align"> <!-- Pagination -->
<?php echo '<h6 class="white-text"'.$display.'>Page '; echo $page + 1 .' sur '.$pages_total.'</h6>';//Page out of total pages
$i = 1;//Set the $i counting variable to 1
echo '<ul class="pagination">';
echo '<li><a href="#!" class="white-text">'.$display.'</a></li>';
// Show the page buttons:
if ($page) {
//echo '<li class="disabled"><a href="gallery.php"><i class="material-icons">chevron_left</i></a></li>';
echo '<li class="waves-effect white-text"><a href="gallery.php?page='.$page_down.'"><i class="material-icons white-text">chevron_left</i></a></li>';
}
for ($i=1;$i<=$pages_total;$i++) {
if(($i==$page+1)) {
echo '<li class="active red darken-4"><a class="white-text" href=gallery.php?page='.$i.'" style="width:0px;">'.$i.'</a></li>';
}
//In this next if statement, calculate how many buttons you'd like to show. You can remove to show only the active button and first, prev, next and last buttons:
if(($i!=$page+1)&&($i<=$page+3)&&($i>=$page-1)) {//This is set for two below and two above the current page
echo '<li class="waves-effect white-text"><a class="white-text" href="gallery.php?page='.$i.'"">'.$i.'</a></li>'; }
}
if (($page + 1) != $pages_total) {
echo '<li class="waves-effect white-text"><a class="white-text" href="gallery.php?page='.$page_up.'"><i class="material-icons">chevron_right</i></a></li>';//Button for next page [>]
//echo '<li class="waves-effect white-text"><a class="white-text" href="gallery.php?page='.$pages_total.'"><i class="far fa-chevron-double-right"></i></a></li>';//Button for last page [>>]
}
echo "</ul>";// #pageNav end ?>
</body>
</html>
答案 0 :(得分：1)
var rotate = true;
$("div").html("rotate(0)")
$("div").click(function(){
rotate? $(this).html("rotate(180deg)"):$(this).html("rotate(0)")
$(this).toggleClass("down");
rotate=!rotate
})div{
position:absolute;
left:50%;
top:50%;
background-color:red;
width:100px;
height:100px;
transition: transform 1s;
transform:translate(-50% , -50%);
}
div.down{
transform: translate(-50% , -50%) rotate(180deg)
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div></div>
也许是这样！
答案 1 :(得分：0)
// this is the variable I want to change
var flag;
$(".outer_rotate_aero").click(function() {
$(".outer_rotate_aero_fa1").toggleClass("down");
flag = false;
});
// Event handlers should not be nested
$(".rotate_aero1").click(function() {
flag = true;
$(".fa2").toggleClass("down");
});
/* No need for this block as flag turns true only on click of '.rotate_aero1'
if (flag == true) {
$(".fa2").toggleClass("down");
}
*/
我希望这个答案！
答案 2 :(得分：0)
您可以将变量的值设置为与变量相反的值，并在单击时使用切换类。 （请参见示例）
var rotate = true;
$("span").click(function() {
// Add or remove class.
$(this).toggleClass("rotate-down");
// Updates variable.
rotate = !rotate;
});/* These styles are only to make the rotation more pronounced. */
section {
display: flex;
justify-content: center;
align-content: center;
padding: 100px 0;
}
span {
display: block;
font-size: 30px;
width: 60px;
height: 60px;
padding: 10px;
border-radius: 50%;
background: hotpink;
text-align: center;
cursor: pointer;
transition: transform .2s ease-in-out;
}
/* This is the classed being toggled by jQuery. */
.rotate-down {
transform: rotate(180deg);
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Example element acting as icon. -->
<section>
<span>?</span>
</section>
答案 3 :(得分：-1)
让javascript onclick按下按钮，然后不要切换变量...使用此代码
<img src=" // your image " id="img">
<img src=" // your rotated image " id="imgRotated">
<button onclick="myfn()">Click to rotate</button>
<script>
function myfn(){
document.getElementById("img").style.display = "none";
document.getElementById("imgRotated").style.display = "block";
}
</script>
我希望对您有帮助