javascript - 为什么我的 JavaScript 中的 CSS 不起作用？

Question

当我点击它时，我试图弹出一个框。这是盒子的 HTML：

<div id="content_1">
    <p>Hello</p>
    <p>Please push the button</p>
    <p><input type="button" id="go_button" value="Go"/> </p>
</div>
<div id="box">
    <p>hello</p>
</div>

这是JavaScript和CSS：

$(document).ready(function() {
    $("#content_2").on("click",function(){
    .css("z-index",3);
    }
}

这是样式以防万一：

#go_button {

}
#content_1 {
margin:20px auto;
position:fixed;
width:1000px;
text-align:center;
border:1px solid #d0d0d0;
box-shadow:1px 1px 5px #aaa;
border-radius:15px;
background:#99FF99;
z-index:3;
}
#box {
position:fixed;
top:100px;
left:300px;
z-index:1;
width:600px;
height:300px;
background:green;
}
body {
background:#f7f7f7;
}

Answer 1

您不能在没有任何东西的情况下调用方法链来启动它。content_2我们在您的标记中看不到具有 id 的元素。也许您的意思是将此应用于#content_1.

$(document).ready(function() {
    $("#content_2").on("click",function(){
        // Apply to this
        $(this).css("z-index",3);
    });
});

如果要将 CSS 应用于其他元素而不是content_2( this)，请改用其选择器。

$(document).ready(function() {
    $("#content_2").on("click",function(){
        $('#box').css("z-index",3);
    });
});

请注意，除非您指定 position: absoluteor position: fixed，z-index否则不会有任何效果。

Answer 2

尝试这个

$(document).ready(function() {
    $("#content_2").on("click",function(){
    $(this).css("z-index",3);
    }
}

Answer 3

看起来您没有将 css 应用于任何东西：

$(document).ready(function() {
$("#content_2").on("click",function(){
        $('#box').css("z-index",3);
    }
}

另外，#content_2未定义。