![](/img/trans.png)
[英]Javascript - How can I create multiple flip cards that flip with an onclick()?
[英]Card flip with Onclick with cards randered from Json Data
我有一个 json 列表,用于填充具有两侧的反应卡列表。 单击按钮时,我想翻转到信息侧,但我只能让它翻转所有卡片。 我可以使用 css 中的 hover 来实现它,然后只有卡片悬停在翻转上。
下面是我的卡号
<MDBRow class="row">
<ul className="ulWidth">
<li className="liWidth"> {this.state.infos.map(post => {
return (
<div key={post.id} id="menu">
<MDBCol lg="4" className=" mb-3 column flip-card" id="myEltId">
<MDBCard className="card colCardinfoHeightImg flip-card-inner">
<img className="img-fluid infoImage" src={require('../../images/infoImage.png')} />
<MDBCardBody>
<MDBCardTitle className="CardTitle text-uppercase text-bold">{post.infoName}</MDBCardTitle>
<MDBCardText>
<strong>Data Example 1:</strong> {post.jsonData1}<br/>
<strong>Data Example 2:</strong> {post.jsonData2}<br/>
<strong>Data Example 3:</strong> {post.jsonData3}<br/>
</MDBCardText>
</MDBCardBody>
<div class="flip-card-back">
<MDBCard className=" colCardinfoHeight">
<MDBCardBody>
<MDBCardTitle>{post.infoName}</MDBCardTitle>
<MDBCardText>
<p><strong>Data Example 3:</strong>{post.jsonData4}<br/>
<strong>Data Example 3:</strong> {post.jsonData5}
</p>
<hr/>
<p><strong>Data Example 3:</strong> {post.jsonData6}<br/>
</MDBCardText>
<MDBBtn className="infoButton" color="orange" size="lg" onClick={this.clickFlipFunction}>Switch Today</MDBBtn>
</MDBCardBody>
</MDBCard>
</div>
</MDBCard>
</MDBCol>
</div>
);
})}
</li>
</ul>
</MDBRow>
这是我当时尝试过的翻转 function,但它翻转了所有渲染的卡片。
onFlipCard(){
$(document).ready(function(){
$(".flip-card").css("transform", " rotateY(180deg)");
$(".flip-card-inner").css("transform", " rotateY(180deg)");
});
}
it works when i input the above css in the css file with the hover tag used and when the user hovers over it flips only the right card but i need it to be a clickable function.
现在,您的事件处理程序正在使用 class“翻转卡”获取所有元素。 这就是这部分正在做的事情:
$(".flip-card")
相反,您需要使用对单击的特定元素的引用,例如:
$(".flip-card").click(function(e){
$(e.target).css("transform", " rotateY(180deg)");
});
onClick
事件处理程序。isCardFlipped
state 变量之类的东西来跟踪卡是否在组件内翻转。onClick
时,切换isCardFlipped
state 值。isCardFlipped
中的值显示flip-card
或flip-card-inner
编辑:我建议不要使用 jquery,或执行直接 DOM 操作。 使用 React 的主要好处(您可能错过了)是能够通过 React 的内部工作间接更新 DOM:简而言之,这仅允许更新那些已更改的 DOM 元素,而不是重绘整个 DOM共。 在此处阅读更多信息
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.