Question

我有三个矩形图像重叠在对角线内，第一个在左上角完全可见，第二个在中心部分隐藏在第一个，最后一个在右下角部分隐藏在第二个。我想要点击的图像在其他图像之上。我试图通过使用jQuery操纵z-index来实现这一点，但它似乎不起作用。实际上似乎jQuery甚至都没有得到认可。

这是我的测试代码：

<html>
<head>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js">
    $(document).ready(function () {
        $('#launch').click(function () {
            alert('Ok');
        });

        $('.bottom-pic').click(function () {
            $(this).css('z-index' : '1');
            $('.bottom-pic').not(this).css('z-index' : '0');
        });
    });
    </script>
    <style type="text/css">
    #pictures {
        width: 650px;
        height: 300px;

        margin-left: auto;
        margin-right: auto;
        margin-top: 20px;
        margin-bottom: 50px;

        position: relative;
    }

    #top {
        top: 0;
        left: 0;

        position: absolute; 
        z-index: 1;
    }

    #center {
        top: 60px; 
        left: 200px;

        position: absolute; 
        z-index: 1;
    }

    #bottom {
        top: 150px; 
        left: 400px; 

        position: absolute; 
        z-index: 0;
    }
    </style>
    </head>
    <body>
    <div id="pictures">
         <img src="bottom-pic.jpg" id="top" class="bottom-pic">
         <img src="bottom-pic.jpg" id="center" class="bottom-pic">
         <img src="bottom-pic.jpg" id="bottom" class="bottom-pic">
    </div>
    <input type="button" value="Try" id="launch">
</body>
</html>

当我点击“启动”按钮时，甚至都没有发生。

Answer 1

好吧，我刚刚意识到你犯了一个小错误，你正在使用SAME标签加载查询和声明你的内联javascript ...你不能这样做。您必须使用两个单独的脚本标记。

<html>
<head>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js">
    </script>

注意新的脚本标记：

  <script type="text/javascript">
    $(document).ready(function () {
        $('#launch').click(function () {
            alert('Ok');
        });

        $('.bottom-pic').click(function () {
            $(this).css('z-index', '1');
            $('.bottom-pic').not(this).css('z-index', '0');
        });
    });
   </script>

...

答案的其余部分仍然适用。即你必须摆脱＃top，＃middle和#bottom中的z-index ....

Answer 2

我建议你从css中删除所有z-index。然后创建一个名为'.veryHighZ-Index的类，并将此类添加到单击的图像＆amp;从先前单击的图像中删除该类...

我稍微修改了你的代码，但这里的代码应该有效。

<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script>
$(document).ready(function () {


        // #pictures div catches all divs inside the #pictures
    $('#pictures div').click(function () {
            $('.veryhighz-index').removeClass('veryhighz-index');
            $(this).addClass('veryhighz-index');
    });
});
</script>
<style type="text/css">
#pictures {
    width: 650px;
    height: 300px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
    margin-bottom: 50px;
        background: lime;
    position: relative;
        overflow: hidden;
}

#top {
    top: 0;
    left: 0;
    position: absolute; 
}

#center {
    top: 60px; 
    left: 200px;
    position: absolute; 
}

#bottom {
    top: 150px; 
    left: 400px; 
    position: absolute; 
}

    .top, .center, .bottom {
    width: 300px;
    height: 300px;
    border: 2px solid red;
    }
    .top {background: red;}
    .center {background: yellow;}
    .bottom {background: blue;}


    .veryhighz-index {
        z-index: 999999;
    }



</style>
</head>
<body>


    <div id="pictures">
        <div id="top" class="top"></div>
        <div id="center" class="center"></div>
        <div id="bottom" class="bottom"></div>
    </div>

</body>
</html>

简而言之，将以下代码添加到您的css

   .veryhighz-index {
    z-index: 999999;
    }

这个代码到javascript函数

   // #pictures img catches all images inside the #pictures
    $('#pictures img').click(function () {
        $('.veryhighz-index').removeClass('veryhighz-index');
        $(this).addClass('veryhighz-index');
    });

Answer 3

您遇到了javascript语法错误。在你的css命令中，替换：with，另外，您需要将自定义脚本包装在自己的javascript标记中，而不是在jqueryimport标记内

Answer 4

按如下方式更改脚本：

    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
          $('#launch').click(function () {
              alert('Ok');
          });

          $('.bottom-pic').click(function () {
              $(this).css('z-index' , '1');
              $('.bottom-pic').not(this).css('z-index' , '0');
          });
        });
    </script>

这应该有效。

Answer 5

这里只是一些建议

由于Ahmed指出您的脚本位于脚本标记内，该脚本标记具有单独的src和url值 - 也为您的内联脚本创建一个单独的脚本。你觉得这样做对吗？
尝试在开始和结束表单标签之间输入按钮输入，或者至少在div或p之类的某些块级元素之间输入。显然，一些scrict doctypes不接受它。
当链接到文件名中包含多个点的js文件（例如1.7.1.min.js）时，脚本无法正常工作 - 我链接到google托管代码，而目录路径中包含这些点例如... / 1.7.1 / jquery.js

我显然需要弄清楚如何包含代码示例 - 单击“{}”按钮或添加4个空格似乎不起作用！

使用jQuery更改重叠图像z-index

5 个答案: