[英]Chaning CSS and content of DIV
我試圖在單擊按鈕后更改div及其CSS的某些內容。 我正在嘗試使用jquery來這樣做，但是只需單擊兩個div並在單擊按鈕后更改其可見性即可。 現在，當我單擊時，什么也沒有發生，並且相同的div仍然可見。 我正在制作一個主要使用php，html和MySQL數據庫的Web應用程序。 我有dbconnect.php，它連接到從中獲取div的所有內容的數據庫。 這是我的代碼：
<?php
session_start();
if(!isset($_SESSION['username'])){
$_SESSION['msg'] = "You must log in first";
header('location: index.php');
}
if(isset($_GET['logout'])){
session_destroy();
unset($_SESSION['username']);
header("location: index.php");
}
?>
<?php include ('dbconnect.php') ?>
<!DOCTYPE html>
<html lang="en">
<head>
<title>UPM</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.2.min.js"></script>
<style>
#proj{
display: inline-block;
padding: 50px 50px;
border-style: solid;
border-width: 3px;
border-radius: 5px;
font-size: 16px;
}
#projcom{
display: none;
border-style: solid;
border-width: 3px;
border-radius: 5px;
font-size: 16px;
border-color: green;
font-color: green;
}
#notcom{
display: inline-block;
padding: 50px 50px;
border-style: solid;
border-width: 3px;
border-radius: 5px;
font-size: 16px;
font-color: red;
border-color: red;
}
.jumbotron {
background-color: #f4511e;
color: #ffffff;
padding: 100px 25px;
}
.bg-grey{
background-color: #f6f6f6;
}
.container-fluid{
padding: 60px 50px;
}
.logo {
font-size: 200px;
}
@media screen and (max-width: 768px) {
.col-sm-4 {
text-align: center;
margin: 25px 0;
}
}
.navbar {
margin-bottom: 0;
background-color: #f4511e;
z-index: 9999;
border: 0;
font-size: 12px !important;
line-height: 1.42857143 !important;
letter-spacing: 4px;
border-radius: 0;
}
.navbar li a, .navbar .navbar-brand {
color: #fff !important;
}
.navbar-nav li a:hover, .navbar-nav li.active a {
color: #f4511e !important;
background-color: #fff !important;
}
.navbar-default .navbar-toggle {
border-color: transparent;
color: #fff !important;
}
</style>
</head>
<body id="MyProjects" data-spy="scroll" data-target=".navbar" data-offset="60">
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand">
<!-- logo not working-->
<!-- <IMG SRC="images/UPMLogo.jpg" width="230px" height="158px">-->
</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li><a href="home.php">HOME</a></li>
<li><a href="myprojects.php">MY PROJECTS</a></li>
<li><a href="eval.php">EVALUATIONS</a></li>
<li><a href="#pricing">MY STATS</a></li>
<li><a href="hints.php">HINTS & TIPS</a></li>
<li><a href="home.php?logout='1'">LOG OUT</a></li>
</ul>
</div>
</div>
</nav>
<div class="jumbotron text-center">
<h1 id =SiteTitle> Welcome to your MyProjects page! </h1>
<h3>Here you will be able to enter all of your university projects along with their deliverable's and deadlines. You can mark your projects as successful or unsuccessful depending on whether you met the deadline.
It is a great way to visually track all of your projects!</h3>
</div>
<div class=""container-fluid">
<p>
To get add a project click on the plus symbol. If a project is completed on time with all the deliverables' mark it with the tick! Otherwise click on the X.
</p>
</div>
<div class="container-fluid text-center bg-grey">
<div class="row text-center">
<div>
<form method="post" action="myprojects.php">
<div class=""input-group>
Project Title :<br>
<input type="text" name="projtitle"><br>
</div>
<div class=""input-group>
Deliverable 1 :<br>
</div>
<div class=""input-group>
<input type="text" name="del1"><br>
Deliverable 2 :<br>
</div>
<div class=""input-group>
<input type="text" name="del2"><br>
</div>
<div class=""input-group>
Deliverable 3 :<br>
<input type="text" name="del3"><br>
</div>
<div class=""input-group>
Final Deadline Date: <br>
<input type="date" name="deadline"><br>
</div>
<div class=""input-group>
Choose a Colour: <br>
<input type="color" name="colour"><br><br>
</div>
<button type="submit" class="btn" name="addproj">+</button>
<p><strong>Click me, click me!</strong></p>
</form>
</div>
</form>
</div>
<!--Display projects-->
<?php
$sql = "SELECT * FROM projects";
$result = mysqli_query($db, $sql);
while ($row = mysqli_fetch_array($result)){
echo "<div id='proj' class='col-sm-4'>";
echo "<p>" . $row['title'] . "</p>";
echo "<p>Deliverables: </p>";
echo "<p>" . $row['del1'] . "</p>";
echo "<p>" . $row['del2'] . "</p>";
echo "<p>" . $row['del3'] . "</p>";
echo "<p>Deadline date:</p>";
echo "<p>" . $row['deadline'] . "</p>";
$target = strtotime($row['deadline']);
$today = time();
$difference = $target - $today;
$days = (int)($difference / 86400);
print $days;
echo "<p>days until deadline</p>";
echo "<button type=\"submit\" class=\"combtn\" name=\"combtn\">√</button> <button type=\"submit\" class=\"btn\" name=\"notcom\">X</button>";
echo "</div>";
echo "<div id='projcom' class='col-sm-4'>";
echo "<p>" . $row['title'] . "</p>";
echo "<p>Deadline date:</p>";
echo "<p>" . $row['deadline'] . "</p>";
echo "<p>Project complete and deadline met!</p>";
echo "</div>";
}
?>
<script>
$(".combtn").click(function () {
$("#proj").css("display", "none");
$("#projcom").css("display", "block");
}
)
</script>
</body>
</html>
您還可以看到，div是循環獲取的，因此從數據庫獲取的每個項目/行都將顯示在新的div中。 我想確保單擊按鈕時，它僅更改一個div的可見性，而不是顯示每個項目。 希望有道理
嘗試這個：
<script>
$(".combtn").click(function () {
$("#proj").css("display", "none");
$("#projcom").css("display", "block");
});
</script>
我可以看到兩個錯誤：
在jquery-1.10.2.min.js之后添加bootstrap.min.js ，因為它取決於jQuery。
您需要為行使用類而不是ID，因為ID不能在單個HTML頁面中重復。
將ID proj和projcom更改為類后，請像這樣更改您的JavaScript代碼。 使用$(this).closest(".proj")您只能獲得要隱藏的當前單擊的按鈕行。 然后，您可以使用$(this).next(".projcom")獲得下一行，以訪問要顯示的下一行。
$(function(){
$(".combtn").click(function () {
$(this).closest(".proj").css("display", "none");
$(this).next(".projcom").css("display", "block");
});
});
您可以使用jQuery內置方法show()來顯示元素，而可以使用hide()來隱藏元素，而不是使用css()方法來顯示或隱藏元素。
$(this).closest(".proj").hide();
$(this).next(".projcom").show();
為什么在使用 Ajax $().css 時我的 html div 中的所有文本都會改變顏色
[英]Why is all the text in my html div chaning color when using Ajax $().css
使用 Javascript 更改 css 中的填充屬性不會立即發生
[英]Chaning fill property in css using Javascript doesnt happen immediately
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.