jQuery click()只是不起作用

Question

jQuery click()只是不起作用

问题

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

我确定事件不是问题,它是触发器.我甚至可以使用以下方法:

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

Run Code Online (Sandbox Code Playgroud)

但是因为我对javascript(和jQuery)真的很新,所以我不想以这种方式解决.

试着这样做:

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

Run Code Online (Sandbox Code Playgroud)

不会工作,我找不到原因.我改变了选择器大约一百次(<a>围绕一个跨度和一个div).

我希望你已经看到了问题,并在你笑完之后告诉我我的错误!:)

如果没有,也许我的代码的那些部分会有所帮助:在你需要看到它的样子的情况下:我试图重建这个名为"使用CSS3的圆形导航效果"的页面/示例来自Codrops的Mary Lou

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>

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

Answer 1

Nie*_*els 8

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

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

Run Code Online (Sandbox Code Playgroud)

归档时间：	14 年，3 月前
查看次数：	4462 次
最近记录：	14 年，3 月前