addClass() 然后 removeClass() 点击 (jquery)答案

【问题标题】：addClass() then removeClass() on click (jquery)addClass() 然后 removeClass() 点击 (jquery)
【发布时间】：2012-12-12 10:00:14
【问题描述】：

.我正在尝试制作一些画廊。想使用 addClass 来显示图像，然后单击同一个地方删除这个新类我用谷歌搜索了帮助，但经过一个小时的努力让它正常工作，我在向你寻求帮助。我在这里找到了反向选项的解决方案（首先删除和添加）

代码：

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

请让我知道我在哪里弄错了。

再次感谢。阿列克谢 alexela.biz

更新

【问题讨论】：

看起来像这样，当它在顶部添加新图像时不再使用 $(document).ready(function(){ $('img').click(function(){ 了
进行了更改：谁能告诉我为什么它不起作用？ $(document).ready(function(){ $('img').click(function(){ if (document.getElementsByClassName('big_image')) { $('.image').addClass('close') ; $('#wrapper').append(''); } else { $('.big_image').remove(); $ ('.image').removeClass('close'); } }) })

标签： jquery click addclass removeclass

【解决方案1】：

试试这个：

$('#wrapper').toggleClass('close');

这将在它不存在时添加一个关闭类，并在它存在时删除该类

【讨论】：

【解决方案2】：

终于成功了这是我的解决方案：

$(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();
    }
})
})

希望对你有帮助

【讨论】：

进行了更新 - $('img.image, img.big_image').live('click', function(){ 否则它适用于您点击的任何图像。希望这会有所帮助。我'将完成的版本放在完成。

【解决方案3】：

 if($('#wrapper').hasClass('close')) {$('#wrapper').removeClass('class')}

你的意思可能是：

 if($('#wrapper').hasClass('close')) {$('#wrapper').removeClass('close')}

【讨论】：

您检查是否存在“关闭”类，然后删除“类”类。您可能打算在那里写“关闭”。