使用jquery旋转CSS卡和＆＃34;这个＆＃34;

时间：2016-02-10 10:52:18

标签： javascript jquery html css

我使用以下代码来旋转我的CSS卡。问题是当我有几张卡片时，它们都会在点击任何按钮时旋转。

我想只旋转包含点击按钮的卡片。

我想我应该使用＆＃39;这个＆＃39;为我的卡片添加一个上下文，但我做不到。

＆＃13;
＆＃13; 
 $('button').click(function () {
            $('.card').toggleClass('flipped');
        });
＆＃13; 
.animation {
            -webkit-transition: all 0.3s ease;
            -moz-transition: all 0.3s ease;
            -ms-transition: all 0.3s ease;
            -o-transition: all 0.3s ease;
            transition: all 0.3s ease;
        }
        
        .cardContainer {
            -webkit-transition: all .3s ease;
            -moz-transition: all .3s ease;
            -ms-transition: all .3s ease;
            transition: all .3s ease;
            /*depth of the elements */
            -webkit-perspective: 800px;
            -moz-perspective: 800px;
            -o-perspective: 800px;
            perspective: 800px;
            /*border: 1px solid #ff0000;*/
            padding-left: 1%;
        }
        
        .card {
            width: 99%;
            height: 200px;
            /*transition effects */
            -webkit-transition: -webkit-transform 0.6s;
            -moz-transition: -moz-transform 0.6s;
            -o-transition: -o-transform 0.6s;
            transition: transform 0.6s;
            -webkit-transform-style: preserve-3d;
            -moz-transform-style: preserve-3d;
            -o-transform-style: preserve-3d;
            transform-style: preserve-3d;
        }
        
        .card.flipped {
            -webkit-transform: rotateY( 180deg);
            -moz-transform: rotateY( 180deg);
            -o-transform: rotateY( 180deg);
            transform: rotateY( 180deg);
        }
        
        .card.flipped: {}
        
        .card .front,
        .card .back {
            display: block;
            height: 100%;
            width: 100%;
            line-height: 60px;
            color: white;
            text-align: center;
            font-size: 4em;
            position: absolute;
            -webkit-backface-visibility: hidden;
            -moz-backface-visibility: hidden;
            -o-backface-visibility: hidden;
            backface-visibility: hidden;
            box-shadow: 3px 5px 20px 2px rgba(0, 0, 0, 0.25);
            -webkit-box-shadow: 0 2px 10px rgba(0, 0, 0, 0.16), 0 2px 5px rgba(0, 0, 0, 0.26);
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.16), 0 2px 5px rgba(0, 0, 0, 0.26);
        }
        
        .card .back {
            width: 100%;
            padding-left: 3%;
            padding-right: 3%;
            font-size: 16px;
            text-align: left;
            line-height: 25px;
        }
        
        .card .back {
            background: #03446A;
            -webkit-transform: rotateY( 180deg);
            -moz-transform: rotateY( 180deg);
            -o-transform: rotateY( 180deg);
            transform: rotateY( 180deg);
        }
        
        .red {
            background-color: red;
        }
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="col-md-3 cardContainer">
                <div class="card red">
                    <div class="front">
                        <h3 class="cardTitle">Card1</h3></div>
                    <div class="back">
                        <div class="content">
                        </div>
                    </div>

                </div>
                <button type="button">Rotate card 1</button>
            </div>

            <br>
            <br>
             <div class="col-md-3 cardContainer">
                <div class="card red">
                    <div class="front">
                        <h3 class="cardTitle">Card2</h3></div>
                    <div class="back">
                        <div class="content">
                        </div>
                    </div>

                </div>
                <button type="button">Rotate card 2</button>
            </div>
＆＃13;
＆＃13;
＆＃13;

4 个答案:

答案 0 :(得分：1)

  

我想只旋转包含点击按钮的卡片。

这些卡片不包含按钮，但是他们的父母会这样做。您可以使用closest查找cardContainer，然后使用find查找card：

$('button').click(function () {
    $(this).closest('.cardContainer').find('.card').toggleClass('flipped');
});


$('button').click(function() {
  $(this).closest('.cardContainer').find('.card').toggleClass('flipped');
});
.animation {
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.cardContainer {
  -webkit-transition: all .3s ease;
  -moz-transition: all .3s ease;
  -ms-transition: all .3s ease;
  transition: all .3s ease;
  /*depth of the elements */
  -webkit-perspective: 800px;
  -moz-perspective: 800px;
  -o-perspective: 800px;
  perspective: 800px;
  /*border: 1px solid #ff0000;*/
  padding-left: 1%;
}
.card {
  width: 99%;
  height: 200px;
  /*transition effects */
  -webkit-transition: -webkit-transform 0.6s;
  -moz-transition: -moz-transform 0.6s;
  -o-transition: -o-transform 0.6s;
  transition: transform 0.6s;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;
}
.card.flipped {
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
  transform: rotateY(180deg);
}
.card.flipped: {} .card .front,
.card .back {
  display: block;
  height: 100%;
  width: 100%;
  line-height: 60px;
  color: white;
  text-align: center;
  font-size: 4em;
  position: absolute;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  backface-visibility: hidden;
  box-shadow: 3px 5px 20px 2px rgba(0, 0, 0, 0.25);
  -webkit-box-shadow: 0 2px 10px rgba(0, 0, 0, 0.16), 0 2px 5px rgba(0, 0, 0, 0.26);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.16), 0 2px 5px rgba(0, 0, 0, 0.26);
}
.card .back {
  width: 100%;
  padding-left: 3%;
  padding-right: 3%;
  font-size: 16px;
  text-align: left;
  line-height: 25px;
}
.card .back {
  background: #03446A;
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
  transform: rotateY(180deg);
}
.red {
  background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="col-md-3 cardContainer">
  <div class="card red">
    <div class="front">
      <h3 class="cardTitle">Card1</h3>
    </div>
    <div class="back">
      <div class="content">
      </div>
    </div>

  </div>
  <button type="button">Rotate card 1</button>
</div>

<br>
<br>
<div class="col-md-3 cardContainer">
  <div class="card red">
    <div class="front">
      <h3 class="cardTitle">Card2</h3>
    </div>
    <div class="back">
      <div class="content">
      </div>
    </div>

  </div>
  <button type="button">Rotate card 2</button>
</div>

或者因为他们是兄弟姐妹，请使用siblings：

$('button').click(function () {
    $(this).siblings('.card').toggleClass('flipped');
});


$('button').click(function() {
  $(this).siblings('.card').toggleClass('flipped');
});
.animation {
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.cardContainer {
  -webkit-transition: all .3s ease;
  -moz-transition: all .3s ease;
  -ms-transition: all .3s ease;
  transition: all .3s ease;
  /*depth of the elements */
  -webkit-perspective: 800px;
  -moz-perspective: 800px;
  -o-perspective: 800px;
  perspective: 800px;
  /*border: 1px solid #ff0000;*/
  padding-left: 1%;
}
.card {
  width: 99%;
  height: 200px;
  /*transition effects */
  -webkit-transition: -webkit-transform 0.6s;
  -moz-transition: -moz-transform 0.6s;
  -o-transition: -o-transform 0.6s;
  transition: transform 0.6s;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;
}
.card.flipped {
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
  transform: rotateY(180deg);
}
.card.flipped: {} .card .front,
.card .back {
  display: block;
  height: 100%;
  width: 100%;
  line-height: 60px;
  color: white;
  text-align: center;
  font-size: 4em;
  position: absolute;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  backface-visibility: hidden;
  box-shadow: 3px 5px 20px 2px rgba(0, 0, 0, 0.25);
  -webkit-box-shadow: 0 2px 10px rgba(0, 0, 0, 0.16), 0 2px 5px rgba(0, 0, 0, 0.26);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.16), 0 2px 5px rgba(0, 0, 0, 0.26);
}
.card .back {
  width: 100%;
  padding-left: 3%;
  padding-right: 3%;
  font-size: 16px;
  text-align: left;
  line-height: 25px;
}
.card .back {
  background: #03446A;
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
  transform: rotateY(180deg);
}
.red {
  background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="col-md-3 cardContainer">
  <div class="card red">
    <div class="front">
      <h3 class="cardTitle">Card1</h3>
    </div>
    <div class="back">
      <div class="content">
      </div>
    </div>

  </div>
  <button type="button">Rotate card 1</button>
</div>

<br>
<br>
<div class="col-md-3 cardContainer">
  <div class="card red">
    <div class="front">
      <h3 class="cardTitle">Card2</h3>
    </div>
    <div class="back">
      <div class="content">
      </div>
    </div>

  </div>
  <button type="button">Rotate card 2</button>
</div>

答案 1 :(得分：0)

使用 sibling 。检查以下JQuery：

＆＃13;
＆＃13; 
$('button').click(function () {
            $(this).siblings(".card").toggleClass('flipped');
        });
＆＃13; 
.animation {
            -webkit-transition: all 0.3s ease;
            -moz-transition: all 0.3s ease;
            -ms-transition: all 0.3s ease;
            -o-transition: all 0.3s ease;
            transition: all 0.3s ease;
        }
        
        .cardContainer {
            -webkit-transition: all .3s ease;
            -moz-transition: all .3s ease;
            -ms-transition: all .3s ease;
            transition: all .3s ease;
            /*depth of the elements */
            -webkit-perspective: 800px;
            -moz-perspective: 800px;
            -o-perspective: 800px;
            perspective: 800px;
            /*border: 1px solid #ff0000;*/
            padding-left: 1%;
        }
        
        .card {
            width: 99%;
            height: 200px;
            /*transition effects */
            -webkit-transition: -webkit-transform 0.6s;
            -moz-transition: -moz-transform 0.6s;
            -o-transition: -o-transform 0.6s;
            transition: transform 0.6s;
            -webkit-transform-style: preserve-3d;
            -moz-transform-style: preserve-3d;
            -o-transform-style: preserve-3d;
            transform-style: preserve-3d;
        }
        
        .card.flipped {
            -webkit-transform: rotateY( 180deg);
            -moz-transform: rotateY( 180deg);
            -o-transform: rotateY( 180deg);
            transform: rotateY( 180deg);
        }
        
        .card.flipped: {}
        
        .card .front,
        .card .back {
            display: block;
            height: 100%;
            width: 100%;
            line-height: 60px;
            color: white;
            text-align: center;
            font-size: 4em;
            position: absolute;
            -webkit-backface-visibility: hidden;
            -moz-backface-visibility: hidden;
            -o-backface-visibility: hidden;
            backface-visibility: hidden;
            box-shadow: 3px 5px 20px 2px rgba(0, 0, 0, 0.25);
            -webkit-box-shadow: 0 2px 10px rgba(0, 0, 0, 0.16), 0 2px 5px rgba(0, 0, 0, 0.26);
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.16), 0 2px 5px rgba(0, 0, 0, 0.26);
        }
        
        .card .back {
            width: 100%;
            padding-left: 3%;
            padding-right: 3%;
            font-size: 16px;
            text-align: left;
            line-height: 25px;
        }
        
        .card .back {
            background: #03446A;
            -webkit-transform: rotateY( 180deg);
            -moz-transform: rotateY( 180deg);
            -o-transform: rotateY( 180deg);
            transform: rotateY( 180deg);
        }
        
        .red {
            background-color: red;
        }
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="col-md-3 cardContainer">
                <div class="card red">
                    <div class="front">
                        <h3 class="cardTitle">Card1</h3></div>
                    <div class="back">
                        <div class="content">
                        </div>
                    </div>

                </div>
                <button type="button">Rotate card 1</button>
            </div>

            <br>
            <br>
             <div class="col-md-3 cardContainer">
                <div class="card red">
                    <div class="front">
                        <h3 class="cardTitle">Card2</h3></div>
                    <div class="back">
                        <div class="content">
                        </div>
                    </div>

                </div>
                <button type="button">Rotate card 2</button>
            </div>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：0)

您可以使用html中的属性添加上下文，该属性也将是卡的类，如下所示。 jquery中的.sibling（）也可以工作，但它需要你的html具有完全相同的元素序列

 $('button').click(function () {
            var cardClass=$(this).attr('data-card');
            $('.'+cardClass).toggleClass('flipped');
        });
.animation {
            -webkit-transition: all 0.3s ease;
            -moz-transition: all 0.3s ease;
            -ms-transition: all 0.3s ease;
            -o-transition: all 0.3s ease;
            transition: all 0.3s ease;
        }
        
        .cardContainer {
            -webkit-transition: all .3s ease;
            -moz-transition: all .3s ease;
            -ms-transition: all .3s ease;
            transition: all .3s ease;
            /*depth of the elements */
            -webkit-perspective: 800px;
            -moz-perspective: 800px;
            -o-perspective: 800px;
            perspective: 800px;
            /*border: 1px solid #ff0000;*/
            padding-left: 1%;
        }
        
        .card {
            width: 99%;
            height: 200px;
            /*transition effects */
            -webkit-transition: -webkit-transform 0.6s;
            -moz-transition: -moz-transform 0.6s;
            -o-transition: -o-transform 0.6s;
            transition: transform 0.6s;
            -webkit-transform-style: preserve-3d;
            -moz-transform-style: preserve-3d;
            -o-transform-style: preserve-3d;
            transform-style: preserve-3d;
        }
        
        .card.flipped {
            -webkit-transform: rotateY( 180deg);
            -moz-transform: rotateY( 180deg);
            -o-transform: rotateY( 180deg);
            transform: rotateY( 180deg);
        }
        
        .card.flipped: {}
        
        .card .front,
        .card .back {
            display: block;
            height: 100%;
            width: 100%;
            line-height: 60px;
            color: white;
            text-align: center;
            font-size: 4em;
            position: absolute;
            -webkit-backface-visibility: hidden;
            -moz-backface-visibility: hidden;
            -o-backface-visibility: hidden;
            backface-visibility: hidden;
            box-shadow: 3px 5px 20px 2px rgba(0, 0, 0, 0.25);
            -webkit-box-shadow: 0 2px 10px rgba(0, 0, 0, 0.16), 0 2px 5px rgba(0, 0, 0, 0.26);
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.16), 0 2px 5px rgba(0, 0, 0, 0.26);
        }
        
        .card .back {
            width: 100%;
            padding-left: 3%;
            padding-right: 3%;
            font-size: 16px;
            text-align: left;
            line-height: 25px;
        }
        
        .card .back {
            background: #03446A;
            -webkit-transform: rotateY( 180deg);
            -moz-transform: rotateY( 180deg);
            -o-transform: rotateY( 180deg);
            transform: rotateY( 180deg);
        }
        
        .red {
            background-color: red;
        }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="col-md-3 cardContainer">
                <div class="card red card-1">
                    <div class="front">
                        <h3 class="cardTitle">Card1</h3></div>
                    <div class="back">
                        <div class="content">
                        </div>
                    </div>

                </div>
                <button type="button" data-card="card-1">Rotate card 1</button>
            </div>

            <br>
            <br>
             <div class="col-md-3 cardContainer">
                <div class="card red card-2">
                    <div class="front">
                        <h3 class="cardTitle">Card2</h3></div>
                    <div class="back">
                        <div class="content">
                        </div>
                    </div>

                </div>
                <button type="button" data-card="card-2">Rotate card 2</button>
            </div>

答案 3 :(得分：0)

你可以使用.prev（）来获取前面的兄弟节点，在你的例子中是卡片，但要注意你的html结构的改变可能会破坏它。

$('button').click(function () {
  $(this).prev().toggleClass('flipped');
});
相关问题
最新问题