addClass（）然後removeClass（）點擊（jQuery）

。我試圖做一些畫廊。想使用addClass來顯示圖像，然後點擊相同的地方來刪除這個新類我google搜索幫助，但試圖讓它正常工作小時後，我要求你的幫助。我發現這裏的反向選擇的解決方案（第一刪除和添加）addClass（）然後removeClass（）點擊（jQuery）

代碼：

<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

更新

來源

2012-12-11 aleXela

樣子，當把它添加新形象頂部它不使用$（document）.ready（function（）{ \t $（'img'）。click（function（）{ 更多 – aleXela

作出更改：任何人都可以告訴我爲什麼它不工作？ $（文件）。就緒（函數（）{ \t $（ 'IMG'）。點擊（函數（）{ \t \t如果（document.getElementsByClassName（ 'big_image'））{ \t \t \t $（」圖像配 '）addClass（' 親密 '）; \t \t \t $（' ＃包裝 '）追加（' 「）; \t \t} \t \t其他 \t \t { \t \t \t $（'。big_image'）。remove（）; \t \t \t $（'。image'）。removeClass（'close'）; \t \t} \t}） }） – aleXela

終於成功了這裏SE類是我的解決方案：

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

希望這將有助於

來源

2012-12-11 17:48:18 aleXela

更新 - $（'img.image， img.big_image'）。live（'click'，function（）{ 否則它可以在你點擊的anyimages上工作希望這會對你有幫助我會完成完成。 – aleXela

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

你大概的意思是：

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

來源

2012-12-11 14:37:53 Neil

??不知道（ – aleXela

）你檢查class「close」是否存在，然後你刪除class「class」，你可能意思是寫「close」在那裏 – Neil

yea，肯定對不起 – aleXela

試試這個：

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

這將添加一個CLO當它不存在，並刪除該類時，它的存在

來源

2012-12-11 14:40:11

addClass（）然後removeClass（）點擊（jQuery）

回答

相關問題