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

最佳答案

我可以看到两个错误:


bootstrap.min.js之后添加jquery-1.10.2.min.js,因为它取决于jQuery。
您需要为行使用类而不是ID,因为ID不能在单个HTML页面中重复。


将ID projprojcom更改为类后,请像这样更改您的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();

09-11 19:11
查看更多