jQuery將類添加到單個元素

Question

將簡單的jquery翻轉組合在一起，單擊並在鼠標離開div容器時返回。 當前，單擊類的添加將應用於所有元素，而不是僅單擊一個。

JSFiddle

 $('.flip').click(function(){ $(this).find('.card').addClass('flipped').mouseleave(function(){ $(this).removeClass('flipped'); }); return false; }); 

 body { background: #ccc; } .flip { -webkit-perspective: 800; width: 200px; height: 100px; position: relative; margin: 20px auto; } .flip .card.flipped { -webkit-transform: rotatex(-180deg); } .flip .card { width: 100%; height: 100%; -webkit-transform-style: preserve-3d; -webkit-transition: 0.5s; } .flip .card .face { width: 100%; height: 100%; position: absolute; -webkit-backface-visibility: hidden ; z-index: 2; font-family: Georgia; font-size: 3em; text-align: center; line-height: 100px; } .flip .card .front { position: absolute; z-index: 1; background: black; color: white; cursor: pointer; } .flip .card .back { -webkit-transform: rotatex(-180deg); background: blue; background: white; color: black; cursor: pointer; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="flip"> <div class="card 1"> <div class="face front">Front</div> <div class="face back">Back</div> </div> <br> <div class="card 2"> <div class="face front">Front</div> <div class="face back">Back</div> </div> </div> 

Answer 1

您已將點擊處理程序添加到元素<div class="flip"> 。 在您的點擊處理程序中，找到被“卡”類點擊的div的所有子元素，然后進行更改。

如果僅在具有類卡的元素上注冊點擊處理程序，該怎么辦？

$('.flip .card').click(function(){
    $(this).addClass('flipped').mouseleave(function(){
        $(this).removeClass('flipped');
    });
    return false;
});

Answer 2

您需要將點擊處理程序添加到card類，而不是父類<div> ； 否則， this引用父級並將找到所有.card子級。

$('.card').click(function(){
  $(this).addClass('flipped').mouseleave(function(){
    $(this).removeClass('flipped');
  });
  return false;
});

下面有一個正在運行的代碼段，您可以在其中查看其運行情況。

 $('.card').click(function(){ $(this).addClass('flipped').mouseleave(function(){ $(this).removeClass('flipped'); }); return false; }); 

 body { background: #ccc; } .flip { -webkit-perspective: 800; width: 200px; height: 100px; position: relative; margin: 20px auto; } .flip .card.flipped { -webkit-transform: rotatex(-180deg); } .flip .card { width: 100%; height: 100%; -webkit-transform-style: preserve-3d; -webkit-transition: 0.5s; } .flip .card .face { width: 100%; height: 100%; position: absolute; -webkit-backface-visibility: hidden ; z-index: 2; font-family: Georgia; font-size: 3em; text-align: center; line-height: 100px; } .flip .card .front { position: absolute; z-index: 1; background: black; color: white; cursor: pointer; } .flip .card .back { -webkit-transform: rotatex(-180deg); background: blue; background: white; color: black; cursor: pointer; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="flip"> <div class="card 1"> <div class="face front"> Front </div> <div class="face back"> Back </div> </div> <br> <div class="card 2"> <div class="face front"> Front </div> <div class="face back"> Back </div> </div> </div> 

Answer 3

您的選擇器位於父div級別，在這里您可以：

http://jsfiddle.net/vrnft584/

$('.card').click(function(){
    $(this).addClass('flipped').mouseleave(function(){
        $(this).removeClass('flipped');
    });
    return false;
});

Answer 4

將click事件綁定到卡而不是翻轉卡：

  $('.card').click(function(){ $(this).addClass('flipped').mouseleave(function(){ $(this).removeClass('flipped'); }); return false; }); 

 body { background: #ccc; } .flip { -webkit-perspective: 800; width: 200px; height: 100px; position: relative; margin: 20px auto; } .flip .card.flipped { -webkit-transform: rotatex(-180deg); } .flip .card { width: 100%; height: 100%; -webkit-transform-style: preserve-3d; -webkit-transition: 0.5s; } .flip .card .face { width: 100%; height: 100%; position: absolute; -webkit-backface-visibility: hidden ; z-index: 2; font-family: Georgia; font-size: 3em; text-align: center; line-height: 100px; } .flip .card .front { position: absolute; z-index: 1; background: black; color: white; cursor: pointer; } .flip .card .back { -webkit-transform: rotatex(-180deg); background: blue; background: white; color: black; cursor: pointer; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="flip"> <div class="card 1"> <div class="face front"> Front </div> <div class="face back"> Back </div> </div> <br> <div class="card 2"> <div class="face front"> Front </div> <div class="face back"> Back </div> </div> </div> 

Answer 5

這很簡單，只需將事件添加到元素本身，而不是父元素

    $('.flip .card').click(function(){
    $(this).addClass('flipped').mouseleave(function(){
        $(this).removeClass('flipped');
    });
    return false;
});

Answer 6

您只需要將該類應用於您將其應用於包含div的單擊的卡片。 你去了：

$('.card').click(function(){
    $(this).addClass('flipped').mouseleave(function(){
        $(this).removeClass('flipped');
    });
    return false;
});