Question

问题

在我的页面上，当点击指定的<a>时，页面的另一部分应该更改。在我的情况下，我现在正试图淡出图像（为了显示第一个图像背后的图像），但我尝试了不同的更改（更改z-index（使用.css）或src（使用.attr））。

我确定事件不是问题，它是触发器。 我甚至可以使用以下内容：

<a onclick='$("img").toggleClass("active")' class="wr-nav-prev">

但是因为我是javascript（和jQuery）的新手我不想这样解决。

尝试这样做：

$(".wr-nav-next").click(function(){
    $("img").toggleClass("active");
});

不起作用，我找不到原因。我将选择器更改了大约一百次（<a>包围了一个跨度和一个div。）

我希望你已经看到了这个问题，并且会在你笑完之后告诉我我的错误！：）

如果没有，我的代码的那些部分可能会有所帮助：如果您需要查看它的样子：我正在尝试重建this page / example called "Circle Navigation Effect with CSS3" by Mary Lou from Codrops

HTML

缺少几行（如css链接）。我很确定它们并不重要。

<script type="text/javascript" src="jquery-1.7.min.js"></script>
<script type="text/javascript" src="centeritem.js"></script>

<script type="text/javascript">
$(document).ready(function() {
    CenterItem('#wr');
});
$(window).resize(function() {
    CenterItem('#wr');
});
$(".wr-nav-next").click(function(){
    $("img").toggleClass("active");
});
</script>

</head>
<body>
<div id="wr">
    <div class="wr-nav"> 
        <a onclick='$("img").toggleClass("active")' class="wr-nav-prev"> 
            <span>Previous picture</span>
            <div></div>
        </a>
        <a class="wr-nav-next">
            <span>Next picture</span>
            <div></div>
        </a>
    </div>
    <div>
        <img class="active" src="Images/large/1.jpg">
        <img src="Images/large/2.jpg">
    </div>
</div>
</body>
</html>

CSS

css有点凌乱，因为我整天用这个样式表测试了一些东西，我可能在清理时忽略了一些东西。

#wr{
    position: relative;
    width: 820px;
    height: 600px;
    border: 0px solid rgba(153,153,153,1);
    background-color:rgba(0,102,204,0.4);
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    border-radius: 50px;
}

.wr-nav{
    position:relative;
    width: 770px;
    height: 120px;
    top: 25px;
    left: 25px;
}

.wr-nav a{
    position:absolute;
    height: 70px;
    width: 70px;
    top: 0px;
}

a.wr-nav-prev{
    left: 0px;
}

a.wr-nav-next{
    right: 0px;
}

.wr-nav a span{
    position: absolute;
    cursor: pointer;
    opacity: 0.9;
    display:block;
    width: 46px;
    height: 46px;
    top: 50%;
    left: 50%;
    margin: -23px 0 0 -23px;
    background-size: 17px 25px;
    text-indent: -9000px;
    -moz-border-radius: 23px;
    -webkit-border-radius: 23px;
    border-radius: 23px;
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    -ms-transition: all 0.4s ease;
    transition: all 0.4s ease;
    background-color:rgba(204,204,204,1);
    background-repeat:no-repeat;
    background-position: center center;
}

.wr-nav a.wr-nav-prev span{
    background-image:url(Images/prev.png);
}

.wr-nav a.wr-nav-next span{
    background-image:url(Images/next.png);
}

.wr-nav a div{
    position: absolute;
    cursor: pointer;
    opacity:1;
    width: 0px;
    height: 0px;
    top: 50%;
    left: 50%;
    margin: 0px;
    -moz-border-radius: 0px;
    -webkit-border-radius: 0px;
    border-radius: 0px;
    -webkit-transition: all 0.2s ease-out;
    -moz-transition: all 0.2s ease-out;
    -o-transition: all 0.2s ease-out;
    -ms-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
    background-repeat:no-repeat;
    background--position: center center;
}

.wr-nav a:hover span{
    width: 100px;
    height: 100px;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    border-radius: 50px;
    margin: -50px 0 0 -50px;
    background-size: 22px 32px;
    background-color:rgba(0,102,204,1);
}

.wr-nav a:hover div{
    width: 90px;
    height: 90px;
    background-size: 100% 100%;
    margin: -45px 0 0 -45px;
    -moz-border-radius: 45px;
    -webkit-border-radius: 45px;
    border-radius: 45px;
}

.wr-nav a.wr-nav-prev div{
    background: rgba(255,153,51,1) url(Images/thumbs/1.jpg) no-repeat center center;
}

.wr-nav a.wr-nav-next div{
    background: rgba(153,153,153,1) url(Images/thumbs/2.jpg) no-repeat center center;
}

img{
    position: absolute;
    opacity: 0;
    border-top: 3px solid rgba(153,153,153,0.8);
    border-bottom: 3px solid rgba(153,153,153,0.8);
    -webkit-transition: all 0.2s ease-out;
    -moz-transition: all 0.2s ease-out;
    -o-transition: all 0.2s ease-out;
    -ms-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
}

img.active{
    opacity: 1;
}

Answer 1

这应该在您的文档就绪功能中。否则，它会尝试在代码之前初始化所有元素的单击，这些元素都是无。

$(function(){
    $(".wr-nav-next").click(function(){
        $("img").toggleClass("active");
    });
});

Answer 2

需要点击document.ready

$(document).ready(function(){
    CenterItem('#wr');
    $(".wr-nav-next").click(function(){
        $("img").toggleClass("active");
    });
});

原因是当分配处理程序时，.wr-nav-next尚未加载到DOM中。您可以使用live方法将其保留在document.ready之外。

$(".wr-nav-next").click(function(){
    $("img").toggleClass("active");
});

或将听众置于页面底部（实际上只需要在wr-nav-next标记之后。

jQuery click（）只是不起作用

问题

HTML

CSS

2 个答案: