Question

我试图在单击按钮后更改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的可见性而不是每个正在显示的项目。希望有意义

Answer 1

试试这个：

<script>
      $(".combtn").click(function () {
          $("#proj").css("display", "none");
          $("#projcom").css("display", "block");
      });
</script>

Answer 2

我可以看到两个错误：

在bootstrap.min.js之后添加jquery-1.10.2.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内置方法css()来显示元素，而使用show()隐藏元素，而不是使用hide()方法来显示或隐藏元素。

$(this).closest(".proj").hide(); 
$(this).next(".projcom").show();

Chaning CSS和DIV的内容

2 个答案: