本文介绍了addClass（）then removeClass（）on click（jquery）的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我试图画一些画廊。
想使用addClass来显示图像，然后点击相同的地方删除这个新类
我googled的帮助，但试图让它正常工作后，我要求你的帮助。
我在这里找到了反向选项的解决方案（第一次删除和添加）
.I'm trying to make some gallery.Want to use addClass to show image and then click on same place to remove this new classI googled for help, but after hour of trying to get it work normally, i'm asking you for help.I found here solution for reversed option (first remove and add)
代码：
<html>
<script type="text/javascript" src="http://www.s-ola.me/js/jquery.js"></script>
<script type="text/javascript" src="http://www.s-ola.me/js/jquery.nailthumb.1.1.min.js"></script>
<style>
#window {
width: 570px;
height: 455px;
position: relative;
background-color: grey;
padding: 20px;
margin: 0 auto;
top: 50%;
margin-top: -225px;
}
.image {
display: inline-block;
margin: 5px;
}
#wrapper {
width: 568px;
height: 455px;
position: absolute;
}
.close {
display: none;
}
.big_image{
width: 100%;
display: block;
}
</style>
<body>
<div id="window">
<div id="wrapper">
<img class="image" src="http://www.livethelesson.com/wp-content/uploads/2012/01/snow.jpg" />
<img class="image" src="http://www.livethelesson.com/wp-content/uploads/2012/01/snow.jpg" />
<img class="image" src="http://www.livethelesson.com/wp-content/uploads/2012/01/snow.jpg" />
<img class="image" src="http://www.livethelesson.com/wp-content/uploads/2012/01/snow.jpg" />
<img class="image" src="http://www.livethelesson.com/wp-content/uploads/2012/01/snow.jpg" />
<img class="image" src="http://www.livethelesson.com/wp-content/uploads/2012/01/snow.jpg" />
<img class="image" src="http://www.livethelesson.com/wp-content/uploads/2012/01/snow.jpg" />
<img class="image" src="http://www.livethelesson.com/wp-content/uploads/2012/01/snow.jpg" />
<img class="image" src="http://www.livethelesson.com/wp-content/uploads/2012/01/snow.jpg" />
<img class="image" src="http://www.livethelesson.com/wp-content/uploads/2012/01/snow.jpg" />
<img class="image" src="http://www.livethelesson.com/wp-content/uploads/2012/01/snow.jpg" />
<img class="image" src="http://www.livethelesson.com/wp-content/uploads/2012/01/snow.jpg" />
<img class="image" src="http://www.livethelesson.com/wp-content/uploads/2012/01/snow.jpg" />
<img class="image" src="http://www.livethelesson.com/wp-content/uploads/2012/01/snow.jpg" />
<img class="image" src="http://www.livethelesson.com/wp-content/uploads/2012/01/snow.jpg" />
<img class="image" src="http://www.livethelesson.com/wp-content/uploads/2012/01/snow.jpg" />
<img class="image" src="http://www.livethelesson.com/wp-content/uploads/2012/01/snow.jpg" />
<img class="image" src="http://www.livethelesson.com/wp-content/uploads/2012/01/snow.jpg" />
<img class="image" src="http://www.livethelesson.com/wp-content/uploads/2012/01/snow.jpg" />
<img class="image" src="http://www.livethelesson.com/wp-content/uploads/2012/01/snow.jpg" />
</div>
</div>
<script>
$(document).ready(function(){
$('.image').nailthumb({containerClass:'image',height:100, width:100, fitDirection:'center', proportions:0.5, maxShrink:0.5});
})
$(document).ready(function(){
$('img').click(function(){
$('.image').toggleClass('close');
$('#wrapper').append('<img src="'+this.src+'" class="big_image" />');
})
})
$(document).ready(function(){
$('.big_image').click(function(){
if($('.big_image')) {$('.big_image').remove(); $('.image').toggleClass('close'); }
})
})
</script>
</body>
</html>
请让我知道我在哪里错了。
Please let me know where i mistaken.
再次感谢。
Alexei
alexela.biz
Thanks again.Alexeialexela.biz
已更新
推荐答案
最后做出了
这是我的解决方案：
Finally made itHere is my solution:
$(document).ready(function(){
$('img.image, img.big_image').live('click', function(){
if (!$('.big_image').length) {
$('.image').addClass('close');
$('#wrapper').append('<img class="big_image" src="'+this.src+'" />');
}
else
{
$('.image').removeClass('close');
$('.big_image').remove();
}
})
})
希望它会帮助
这篇关于addClass（）then removeClass（）on click（jquery）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！