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

发布于 2024-12-23 04:09:20 字数 1614 浏览 1 评论 0原文

我有三个矩形图像重叠在对角线上，第一个在左上角完全可见，第二个位于中心，部分被第一个隐藏，最后一个位于右下角，部分被第二个隐藏。我希望单击的图像位于其他图像之上。我试图通过使用 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>

当我单击“启动”按钮时，什么也没有发生。

原文

I have three rectangular images overlapped within a diagonal line, the first fully visible on the top-left corner, the second in the center partially hidden by the first and the last in the bottom-right corner partially hidden by the second.
I want the image which is clicked to go on top of the others. I'm trying to achieve this by manipulating z-index with jQuery but it doesn't seem to work. It actually seems like jQuery isn't even recognized.

This is my test code:

<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>

Still when I click the "launch" button nothing even happens.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

花海 2024-12-30 04:09:20

好吧，我刚刚意识到你犯了一个小错误，你使用相同的标签来加载查询和声明你的内联 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 ....

Okay i just realized that you made small mistake you are using the SAME tag for both loading query and DECLARING your inline javascript... you can't do that. You have to use two separate script tags.

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

NOTE the new script tag:

  <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>

...

The rest of the answer still applies.. Namely you have to get rid of the z-index in #top, #middle, and #bottom....

回复收藏 0 原文

你另情深 2024-12-30 04:09:20

我建议您从 css 中删除所有 z 索引。然后创建一个名为“.veryHighZ-Index”的类，并将该类添加到单击的图像中。从之前单击的图像中删除该类...

我稍微修改了您的代码，但是这里的代码应该可以工作。

<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');
    });

I recommend you remove all the z-indexes from your css. Then create a class called '.veryHighZ-Index, for example, and add this class to the clicked image & remove the class from the previously clicked image...

I modified your code a little bit, but this code here should work.

<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>

In short, add the following code to your css

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

and this code to the javascript functions

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

回复收藏 0 原文

孤千羽 2024-12-30 04:09:20

您遇到了 JavaScript 语法错误。在您的 css 命令中，将 : 替换为 ,
另外，您需要将自定义脚本包装在其自己的 javascript 标签中，而不是 jqueryimport 标签内

回复收藏 0 原文

那小子欠揍 2024-12-30 04:09:20

按如下方式更改脚本：

    <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>

这应该可行。

Change you scripts as follows:

    <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>

That should work.

回复收藏 0 原文

何处潇湘 2024-12-30 04:09:20

这里只是一些建议

正如 Ahmed 指出的那样，您的脚本位于一个脚本标记内，该标记具有单独的 src 和 url 值 - 也为您的内联脚本创建一个单独的标记。你很高兴你做对了吗？
尝试将按钮输入放在打开和关闭表单标签之间，或者至少放在一些块级元素（例如 div 或 p）之间。显然，一些严格的文档类型不接受它。
当链接到文件名中带有多个点的 js 文件（例如 1.7.1.min.js）时，我遇到了一些脚本无法正常工作的问题 - 我链接到 google 托管代码，该代码在目录路径中包含这些点，例如 . ../1.7.1/jquery.js

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

回复收藏 0 原文

~没有更多了~