Question

当我鼠标悬停在HTML按钮上没有发生任何事情时，我的期望是如果我将鼠标悬停在按钮上它应该显示javascript工作正常。有没有办法实现这一目标。我是javascript的新手，所以代码可能是错误的。

<!DOCTYPE html>
    <html>
    <head>
        <title>JavaScript</title>
        <script type="text/javascript">
            $(document).ready(function(e) {

                $(".carts").mouseover(function(){
                    $(".minicart").css("display","block");
                });

                $(".carts").mouseleave(function(e) {
                    $(".minicart").css("display","none"); 
                });
            }
    </script>

    </head>
    <body>

    <button class="carts"> Add </button>
    <div style="width:400px;position:absolute;top: 34px;right: 166px;z-index: 99999; background-color:#FFFFFF; display:none" class="minicart">



    <?php
    $var = 7;

    if($var == 7)
    {
        echo "JavaScript works fine ";
    }
    else
    {
        echo "Didn't Work";
    } 

    ?>

    </div>
    </body>
    </html>

Answer 1

<html>
    <head></head>
<body>

    <button class="carts"> Add </button>

    <div style="width:400px;position:absolute;top: 34px;right: 166px;z-index: 99999; background-color:#FFFFFF; display:none; border:1px solid black" class="minicart"></div>

    <!-- import jquery from google hosted libraries
        or you can download the latest jquery version
        and use it with your project
     -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

    <script>

        $(document).ready(function(){
            // bind events
            $(".carts").mouseover(function(){
                $(".minicart").css("display","block");

            });

            $(".carts").mouseleave(function(e) {
               $(".minicart").css("display","none"); 
            });
        });

    </script>
 <?php
    $var = 7;

    if($var == 7)
    {
        echo "JavaScript works fine ";
    }
    else
    {
        echo "Didn't Work";
    } 

    ?>
</body>
</html>

Answer 2

您使用过jQuery代码并且可能没有导入它。在<head>...</head>

中写下以下行

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

注意：请务必在开始编写脚本之前写下此行，即在此之前，

<script type="text/javascript">
    $(document).ready(function(e) {

        $(".carts").mouseover(function(){
            $(".minicart").css("display","block");

        });

        $(".carts").mouseleave(function(e) {
           $(".minicart").css("display","none"); 
        });
    }
    </script>

UPDATE：为了确保jQuery正确导入，请写

$(document).ready(function(){
    alert("jQuery is working!");
});

Answer 3

你使用过jquery，但我猜你没有下载jquery文件的源代码并链接到它。我希望下载 http://code.jquery.com/jquery-1.11.3.min.js 到你的桌面或你想要的任何位置然后使用脚本标记

链接到它

编辑：请将JS文件下载到您的系统，然后使用

将其包含在HTML中

<script src="D:\MyProject\myscripts.js"></script>

Answer 4

这里我上传了我的更新代码，没有得到任何积极的结果。我想知道，这段代码中是否有任何错误的函数。

<!DOCTYPE html>
    <html>
    <head>
        <title>JavaScript</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <script type="text/javascript">


    $(document).ready(function(e) {

    $(document).ready(function(){
        alert("jQuery is working!");
    });

        $(".carts").mouseover(function(){
            $(".minicart").css("display","block");

        });

        $(".carts").mouseleave(function(e) {
           $(".minicart").css("display","none"); 
        });
    }
    </script>

    </head>
    <body>

    <button class="carts"> Add </button>
    <div style="width:400px;position:absolute;top: 34px;right: 166px;z-index: 99999; background-color:#FFFFFF; display:none" class="minicart">

    <p> heehghgdhgdh</p>

    <?php
    $var = 7;

    if($var == 7)
    {
        echo "JavaScript works fine ";
    }
    else
    {
        echo "Didn't Work";
    } 

    ?>

    </div>
    </body>
    </html>

如何将Jquery与PHP集成

4 个答案: