hasClass不工作，表現出對每張專輯框格單擊替換類

Question

<div class="album 1"></div> 
<div class="album 2"></div> 
<div class="album 3"></div> 
<div class="album 4"></div> 

<script> 

$('.album').click(function(){ 
    $('.album').each(function(){ 
    $('enlarge-album-box').css('display','none'); 

    if($(this).hasClass('1')){ 
    alert('this is'); 
    $('.enlarge-album-box').show().css('background','red'); 
    } 
    else if($(this).hasClass('2')){ 
    alert('now this'); 
    $('.enlarge-album-box').show().css('background','green'); 
    } 
    }); 

}); 
</script> 

我創建一個畫冊，彩盒，將通過點擊每張專輯類型的顯示相關的開箱圖片，顯示的圖像，iv'e給每個專輯等1 2 3 4，所以我想在點擊每個不同的類顯示在放大框不同的性質不同的類

Answer 1

沒有必要在每個循環中，也可用於隱藏元素的選擇是錯誤的

jQuery(function() { 
    $('.album').click(function() { 
     $('.enlarge-album-box').hide(); 

     if ($(this).hasClass('1')) { 
      $('.enlarge-album-box').show().css('background', 'red'); 
     } else if ($(this).hasClass('2')) { 
      $('.enlarge-album-box').show().css('background', 'green'); 
     } 
    }); 
}) 

演示：Fiddle

Answer 2

$('enlarge-album-box').css('display','none'); 

應該是

$('.enlarge-album-box').css('display','none'); 

或

$('#enlarge-album-box').css('display','none'); //matter what is in your case id or class 

Answer 3

<div class="album one"></div> 
<div class="album two"></div> 
<div class="album three"></div> 
<div class="album four"></div> 

<script> 

$('.album').click(function(){ 
    $('.album').each(function(){ 
    $('enlarge-album-box').css('display','none'); 

    if($(this).hasClass('one')){ 
    alert('this is'); 
    $('.enlarge-album-box').show().css('background','red'); 
    } 
    else if($(this).hasClass('two')){ 
    alert('now this'); 
    $('.enlarge-album-box').show().css('background','green'); 
    } 
    }); 

}); 

Answer 4

試試這個

$(function() { 
     $('.album').on('click',function (e) { 
      e.stopPropagation(); 
      $('.enlarge-album-box').hide(); 

      if ($(this).hasClass('1')) { 
       $('.enlarge-album-box').show().css('background', 'red'); 
      } else if ($(this).hasClass('2')) { 
       $('.enlarge-album-box').show().css('background', 'green'); 
      } 
     }); 
    }) 
    $('.enlarge-album-box').click(function(e){ 
     e.stopPropagation(); 
    }); 
    $(document).click(function(){ 
     $('.enlarge-album-box').slideUp(); 
    }); 

DEMO