我是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);
干杯！ （编辑显示代码）
答案 0 :(得分：0)
我创建了一个修改过的函数flipThis并从你的html中删除了onclick动作。 jsfiddle
正如我在评论中所写，你必须认识到你目前在DOM中的位置。我想，代码是不言自明的。我还在flipThis函数中添加了一个参数，因此我们更准确地了解了我们正在使用的内容。 （不是真的需要，我们仍然可以使用$（this），但这是我做事的方式。
if($(e.currentTarget).prop('tagName')=="BUTTON")
$this = $(this).closest('.sm_box');
else
$this = $(this);