Блог

Главная - Вопросы по программированию - Странное поведение метода .toggleClass()

Странное поведение метода .toggleClass()

#javascript #jquery #html #css

#javascript #jquery #HTML #css

Вопрос:

У меня есть два элемента div (карточки), которые я хочу выполнить с эффектом переворота (используя css3). Проблема в том, что когда пользователь нажимает на элемент div (например, card), все карты переворачиваются. Я хочу перевернуть только div (card), который щелкнул, а не все divs. Может кто-нибудь сказал мне, в чем проблема?

Вот демонстрация jsFiddle:

jsFiddle

Вот код, который используется:

HTML:

 <div class="flip-container">
    <div class="flipper" id="flipper">
        <div class="front"> 
        </div>
    <div class="back">
            <img src="http://icons.iconarchive.com/icons/reclusekc/kulo/96/Skull-1-icon.png">
        </div>
        <div class="front"> 
        </div>
    <div class="back">
            <img src="http://img9.uploadhouse.com/fileuploads/17699/176992615db99bb0fd652a2e6041388b2839a634.png">
        </div>

    </div>
</div>

JavaScript:

 /*Jquery is incuded */
$(".flipper").click(function(){
    var id = $(this).attr("id");
    document.getElementById(id).classList.toggle('flipped');
});

CSS:

 /* entire container, keeps perspective */
.flip-container{
/*perspective*/
-webkit-perspective:1000;
   -moz-perspective:1000;
    -ms-perspective:1000;
     -o-perspective:1000;
        perspective:1000;
    display: table;
        margin: 0px auto;
    width: auto;
}
/* flip the pane when hovered */
    .flipped {
/*transform*/
-webkit-transform:rotateY(180deg);
   -moz-transform:rotateY(180deg);
    -ms-transform:rotateY(180deg);
     -o-transform:rotateY(180deg);
        transform:rotateY(180deg);
}
.front, .back{
 float: left;
    width: 100px;
    height: 120px;
    margin: 5px;
    padding: 5px;
    border: 4px solid #EE872A;
    cursor: pointer;
    border-radius: 10px;
    box-shadow: 0 1px 5px rgba(0,0,0,.5);
        z-index:2;
  background: #B1B1B1;
    /*backface-visibility*/
-webkit-backface-visibility:hidden;
   -moz-backface-visibility:hidden;
    -ms-backface-visibility:hidden;
     -o-backface-visibility:hidden;
        backface-visibility:hidden;

}
/* flip speed goes here */
.flipper {
/*transition*/
-webkit-transition:0.6s;
   -moz-transition:0.6s;
     -o-transition:0.6s;
        transition:0.6s;
/*transform-style*/
-webkit-transform-style:preserve-3d;
   -moz-transform-style:preserve-3d;
    -ms-transform-style:preserve-3d;
     -o-transform-style:preserve-3d;
        transform-style:preserve-3d;
position:relative;
}
/* hide back of pane during swap */
/* front pane, placed above back */
/* back, initially hidden pane */
.back{
/*transform*/
-webkit-transform:rotateY(180deg);
   -moz-transform:rotateY(180deg);
    -ms-transform:rotateY(180deg);
     -o-transform:rotateY(180deg);
        transform:rotateY(180deg);
    z-index:3;
}

Комментарии:

1. Где .toggleClass() ?

2. если вы используете jquery, почему бы не использовать this : $(id).toggleClass('flipped'); вместо this: document.getElementById(id).classList.toggle('flipped'); ?

3. Кроме того, у вас есть только один элемент с классом flipper , который содержит обе карты, поэтому, конечно, щелчок по нему переворачивает весь вид. Поместите обе карты в отдельные контейнеры.

4. @blurfus у вас есть ошибка. Я изменю свой код.

Ответ №1:

Это должно сработать http://jsfiddle.net/wvveY/61 /

 <div class="flip-container">
    <div class="flipper">
        <div class="front"></div>
        <div class="back">
            <img src="http://icons.iconarchive.com/icons/reclusekc/kulo/96/Skull-1-icon.png">
        </div>
    </div>
    <div class="flipper">
        <div class="front"></div>
        <div class="back">
            <img src="http://img9.uploadhouse.com/fileuploads/17699/176992615db99bb0fd652a2e6041388b2839a634.png">
        </div>
    </div>
</div>


$(".flipper").click(function () {
    $(this).toggleClass('flipped');
});

Ответ №2:

попробуйте использовать это в своем JS

 $(".flipper").click(function(){
    $(this).toggleClass('flipped');
});

Обновите
и ваш HTML следующим образом:

 <div class="flipper">
    <div class="front"> 
    </div>
    <div class="back">
       <img src="http://icons.iconarchive.com/icons/reclusekc/kulo/96/Skull-1-icon.png">
    </div>
</div>

<div class="flipper">
    <div class="front"> 
    </div>
    <div class="back">
        <img src="http://img9.uploadhouse.com/fileuploads/17699/176992615db99bb0fd652a2e6041388b2839a634.png">
    </div>
</div>

Комментарии:

1. Я думаю, что этой проблемы нет. Спасибо за ответ, кстати. Я попробую ваше решение

2. вам нужно будет настроить свои значения «flipper» (прямо сейчас они находятся друг над другом и перелистываются, как страница)

Ответ №3:

Может быть, вы хотите что-то подобное http://jsfiddle.net/wvveY/67 /

Вам нужно разделить ваши карты, чтобы это понравилось:

 <div class="flip-container">
    <div class="flipper" >
        <div class="front"> 
        </div>
    <div class="back">
            <img src="http://icons.iconarchive.com/icons/reclusekc/kulo/96/Skull-1-icon.png">
        </div>
        </div>
        <div class="flipper" >
        <div class="front"> 
        </div>
    <div class="back">
            <img src="http://img9.uploadhouse.com/fileuploads/17699/176992615db99bb0fd652a2e6041388b2839a634.png">
        </div>