通过使用CSS / Javascript单击不同的按钮来翻转多个div

时间:2015-02-16 12:57:58

标签: javascript jquery css

我是Javascript的新手。我已经玩了一下,并设法在一个页面上使用教程和其他一些帮助单独翻转多个div。现在,我想看看我是否可以使用按钮或超链接翻转相同的div。

我认为这就像将控制翻转的类移动到按钮一样简单,但似乎并非如此。我已经读过,我需要调整我的Javascript才能从传递的ID中工作。

问题是,我不知道该怎么做。我已尝试在点击时将按钮ID传递给我的Javascript函数(如:<button class="flip-it" onClick="flipThis(card-1)">Click Me</button>),但这并不起作用。我可能会离开这里。

我的小提琴是here。我已经离开了第三个div,就像之前一样,工作,只是为了告诉你我从哪里开始。

非常感谢任何帮助。

HTML:

<p>some content above the flip card</p>

<h1>The CSS flip card:</h1> 
<div class="large_box_main">
    <div>
        <div class="sm_box" id="card-1">
            <div class="flipcard">
                <div class="flipcard-front">
                    <div class="sm_img_box">
                        <img class="image" src="http://www.catchat.org/images/ferals_block_2009.jpg" />
                    </div>
                    <div class="sm_info_box">
                         <h2>Ginger</h2> 
                         <h3>Cat 1</h3> 
                         <h4>Male</h4> 
                        <p class="info">Front</p>
                        <button class="flip-it" onClick="flipThis(card-1)">Click Me</button>
                    </div>
                </div>
                <div class="flipcard-back">
                    <div class="sm_info_box">
                         <h2>Ginger</h2> 
                         <h3>Cat 1</h3> 
                         <h4>Male</h4> 
                        <p class="info">Back</p>
                        <button class="flip-it" onClick="flipThis(card-1)">Click Me</button>
                    </div>
                </div>
            </div>
        </div>
        <div>
            <div class="sm_box" id="card-2">
                <div class="flipcard">
                    <div class="flipcard-front">
                        <div class="sm_img_box">
                            <img class="image" src="http://www.petrescue.org.nz/files/animal/attachment/93/small_cats.h5.jpg" />
                        </div>
                        <div class="sm_info_box">
                             <h2>Tabby</h2> 
                             <h3>Cat 2</h3> 
                             <h4>Female</h4> 
                            <p class="info">Front</p>
                            <button class="flip-it" onClick="flipThis(card-2)">Click Me</button>
                        </div>
                    </div>
                    <div class="flipcard-back">
                        <div class="sm_info_box">
                             <h2>Tabby</h2> 
                             <h3>Cat 2</h3> 
                             <h4>Female</h4> 
                            <p class="info">Back</p>
                            <button class="flip-it" onClick="flipThis(card-2)">Click Me</button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="sm_box flip-it">
                <div class="flipcard">
                    <div class="flipcard-front">
                        <div class="sm_img_box">
                            <img class="image" src="https://s-media-cache-ak0.pinimg.com/236x/0f/4a/56/0f4a5681046ad10f36098451bf2128d2.jpg" />
                        </div>
                        <div class="sm_info_box">
                             <h2>Siamese</h2> 
                             <h3>Cat 3</h3> 
                             <h4>Male</h4> 
                            <p class="info">Front</p>
                        </div>
                    </div>
                    <div class="flipcard-back">
                        <div class="sm_info_box">
                             <h2>Siamese</h2> 
                             <h3>Cat 3</h3> 
                             <h4>Male</h4> 
                            <p class="info">Back</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

CSS:

.large_box_main {
    width:100%;
    margin:0px 0px 10px;
    float:left;
    display:inline;
}
.sm_box {
    width:180px;
    /* The width of this element */
    margin:10px 15px 20px;
    border: 1px solid #e3d9ec;
    border-radius: 10px;
    float:left;
}
.sm_box:hover {
    border: 1px solid #9975B9;
}
.sm_img_box {
    width:165px;
    margin:6px;
    float:left;
    display:inline;
}
.sm_info_box {
    width:165px;
    margin:8px;
    background-color:#e3d9ec;
    float:left;
    display:inline;
    text-align:center;
    line-height:7px;
    border-radius: 5px;
}
img.image {
    display:block;
    margin:0px auto;
}
.flipcard {
    position: relative;
    height: auto;
    min-height: 0px;
    /* Flip card styles: WebKit, FF, Opera */
    -webkit-perspective: 800px;
    -moz-perspective: 800px;
    -o-perspective: 800px;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    -webkit-transition: min-height 1s ease-out 0s, -webkit-transform 1s ease-out 0.5s;
    -moz-transition: min-height 1s ease-out 0s, -moz-transform 1s ease-out 0.5s;
    -o-transition: min-height 1s ease-out 0s, -o-transform 1s ease-out 0.5s;
    /* only height adjustment for IE here */
    -ms-transition: min-height 1s ease-out 0s;
}
/* The class that flips the card: WebKit, FF, Opera */
 .flipcard.card-flipped {
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
}
.flipcard .flipcard-front, .flipcard .flipcard-back, .front, .back {
    top: 0;
    left: 0;
    width: 100%;
    /* backface: all browsers */
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
    /* Flip card styles: IE 10,11 */
    -ms-perspective: 800px;
    -ms-transform-style: flat;
    -ms-transition: -ms-transform 1s ease-out 0.5s;
}
.flipcard .flipcard-front, .front, .back {
    position: relative;
    display: inline-block;
    -webkit-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    -o-transform: rotateY(0deg);
    transform: rotateY(0deg);
}
.flipcard .flipcard-back {
    position: absolute;
    display: none;
    -ms-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    transform: rotateY(180deg);
    /*  webkit bug: https://bugs.webkit.org/show_bug.cgi?id=54371,
          You need this fix if you have any input tags on your back face */
    -webkit-transform: rotateY(180deg) translateZ(1px);
}
/* The 2 classes that flip the faces instead of the card: IE 10,11 */
 .flipcard .flipcard-front.ms-front-flipped {
    -ms-transform: rotateY(180deg);
}
.flipcard .flipcard-back.ms-back-flipped {
    -ms-transform: rotateY(0deg);
}
.info {
    text-align:justify;
    padding:0px 5px;
    line-height:initial;
}

使用Javascript:

function flipThis() {
    var $this = $(this);
    var card = $this.find('.flipcard');
    var front = $this.find('.flipcard-front');
    var back = $this.find('.flipcard-back');
    var tallerHight = Math.max(front.height(), back.height()) + 'px';
    var visible = front.hasClass('ms-front-flipped') ? back : front;
    var invisible = front.hasClass('ms-front-flipped') ? front : back;
    var hasTransitioned = false;
    var onTransitionEnded = function () {
        hasTransitioned = true;
        card.css({
            'min-height': '0px'
        });
        visible.css({
            display: 'none',
        });
        // setting focus is important for keyboard users who might otherwise
        // interact with the back of the card once it is flipped.
        invisible.css({
            position: 'relative',
            display: 'inline-block',
        }).find('button:first-child,a:first-child').focus();
    }

    // this is bootstrap support, but you can listen to the browser-specific
    // events directly as well
    card.one($.support.transition.end, onTransitionEnded);

    // for browsers that do not support transitions, like IE9
    setTimeout(function () {
        if (!hasTransitioned) {
            onTransitionEnded.apply();
        }
    }, 2000);

    invisible.css({
        position: 'absolute',
        display: 'inline-block'
    });

    card.css('min-height', tallerHight);
    // the IE way: flip each face of the card
    front.toggleClass('ms-front-flipped');
    back.toggleClass('ms-back-flipped');
    // the webkit/FF way: flip the card
    card.toggleClass('card-flipped');
}

$('button.flip-it').click(flipThis);
$('div.flip-it').click(flipThis);

干杯! (编辑显示代码)

1 个答案:

答案 0 :(得分:0)

我创建了一个修改过的函数flipThis并从你的html中删除了onclick动作。 jsfiddle

正如我在评论中所写,你必须认识到你目前在DOM中的位置。我想,代码是不言自明的。我还在flipThis函数中添加了一个参数,因此我们更准确地了解了我们正在使用的内容。 (不是真的需要,我们仍然可以使用$(this),但这是我做事的方式。

if($(e.currentTarget).prop('tagName')=="BUTTON")
    $this = $(this).closest('.sm_box');
else
    $this = $(this);