Question

在鼠标离开div容器时，单击并单击一个简单的jquery flip并返回。目前，点击时添加的类正在应用于所有元素，而不是仅应用于单击的元素。

$('.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">。在您的点击处理程序中，您会找到 all 使用类＆＃34; card＆＃34;并改变它们。

如果仅在具有类卡的元素上注册您的点击处理程序，该怎么办？

$('.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

您的选择者位于父级别，您可以：

http://jsfiddle.net/vrnft584/

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

Answer 4

这很简单，只需将事件添加到元素本身而不是父元素

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

Answer 5

您只需将该类应用于您将其应用于包含div的已点击卡片。你去了：

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

Jquery将类添加到单个元素

5 个答案: