Javascript 更改CSS和DIV的内容
我试图在单击按钮后更改div的一些内容及其CSS。我正试图使用jquery来实现这一点，但只需要有两个div并在单击按钮后更改它们的可见性。现在，当我单击时，不会发生任何事情，并且相同的div仍然可见。我正在制作一个web应用程序，主要使用php、html和MySQL数据库。我有dbconnect.php，它连接到从中获取div所有内容的数据库。这是我的密码：Javascript 更改CSS和DIV的内容,javascript,php,jquery,html,css,Javascript,Php,Jquery,Html,Css,我试图在单击按钮后更改div的一些内容及其CSS。我正试图使用jquery来实现这一点，但只需要有两个div并在单击按钮后更改它们的可见性。现在，当我单击时，不会发生任何事情，并且相同的div仍然可见。我正在制作一个web应用程序，主要使用php、html和MySQL数据库。我有dbconnect.php，它连接到从中获取div所有内容的数据库。这是我的密码： <?php session_start(); if(!isset($_SESSION['username'])){ $
<?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>
芬欧汇川大学
#项目{
显示：内联块；
填充：50px 50px；
边框样式：实心；
边框宽度：3倍；
边界半径：5px；
字体大小：16px；
}
#项目{
显示：无；
边框样式：实心；
边框宽度：3倍；
边界半径：5px；
字体大小：16px；
边框颜色：绿色；
字体颜色：绿色；
}
#诺科姆{
显示：内联块；
填充：50px 50px；
边框样式：实心；
边框宽度：3倍；
边界半径：5px；
字体大小：16px；
字体颜色：红色；
边框颜色：红色；
}
琼伯伦先生{
背景色：#F451E；
颜色：#ffffff；
填充：100px 25px；
}
.bg灰色{
背景色：#f6f6f6；
}
.容器液体{
填充：60px 50px；
}
.标志{
字体大小：200px；
}
@媒体屏幕和屏幕（最大宽度：768px）{
.col-sm-4{
文本对齐：居中；
利润率：25px0；
}
}
navbar先生{
页边距底部：0；
背景色：#F451E；
z指数：9999；
边界：0；
字体大小：12px！重要；
线高：1.42857143！重要；
字母间距：4px；
边界半径：0；
}
.navbar li a、.navbar.navbar品牌{
颜色：#fff！重要；
}
.navbar导航李a：悬停，.navbar导航李.active a{
颜色：#F451E！重要；
背景色：#fff！重要；
}
.navbar默认值.navbar切换{
边框颜色：透明；
颜色：#fff！重要；
}
欢迎来到你的MyProjects页面！
在这里，你可以输入你所有的大学项目以及它们的可交付成果和截止日期。您可以将项目标记为成功或不成功，具体取决于您是否在截止日期前完成。
这是一个很好的方式来可视化跟踪您的所有项目！
试试这个：
<script>
$(".combtn").click(function () {
$("#proj").css("display", "none");
$("#projcom").css("display", "block");
});
</script>
$（“.combtn”）。单击（函数（）{
$（“#proj”）.css（“显示”、“无”）；
$（“#projcom”）.css（“显示”、“块”）；
});
我可以看到两个错误：
在jquery-1.10.2.min.js之后添加bootstrap.min.js
，因为它取决于jquery
您需要为行使用类而不是ID，因为ID不能在单个HTML页面中复制
在将IDproj
和projcom
更改为类之后，像这样更改JavaScript代码。使用$（this）.closest（.proj”）
只能获取要隐藏的当前单击的按钮行。
然后可以使用$（this.next（.projcom”）
获取下一行，以访问要显示的下一行
$(function(){
$(".combtn").click(function () {
$(this).closest(".proj").css("display", "none");
$(this).next(".projcom").css("display", "block");
});
});
与使用css（）
方法显示或隐藏元素不同，您可以使用jQuery内置方法show（）
显示元素，并使用hide（）
隐藏元素
$(this).closest(".proj").hide();
$(this).next(".projcom").show();
使用jQuery不需要引导JS，但使用引导JS需要jQuery。@ZeusZdravkov请仔细阅读第1点。我在哪里写jquery取决于引导？对不起。我误解了你，可能是因为你有一些语法问题。Bootstrap JS integration是一个未关闭的JS标记=>下面所有的HTML都被认为是JS，直到第一个关闭标记（）。此外，您的许多类都没有引号。例如，class=”“某些类
。这样就认为元素没有类，some class
是一个属性。