单击jQuery中div内的图像后翻转效果(Flip effect after clicking an image inside a div in jQuery)
当我点击整个div时，我现在有一个翻转效果; 看到这个链接：
但我想要实现的是，只有当我点击div右上角的I图像或信息图像时，它才会翻转。 当我想回到图表div时，与图像栏相同。
这就是我所拥有的，但当我将.flip更改为.flip的类名时，它无法正常工作。
$(".flip").click(function(){ $(this).find(".card").toggleClass("flipped"); return false; });我的代码;
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <style> .flip { -webkit-perspective: 300; -ms-perspective: 300; -moz-perspective: 300; -o-perspective: 300; width: 100%; height: 500px; position: relative; margin:auto; margin-top:20px; } .flip .card.flipped { transform:rotatey(-180deg); -ms-transform:rotatey(-180deg); /* IE 9 */ -moz-transform:rotatey(-180deg); /* Firefox */ -webkit-transform:rotatey(-180deg); /* Safari and Chrome */ -o-transform:rotatey(-180deg); /* Opera */ } .flip .card { width: 100%; height: 100%; -webkit-transform-style: preserve-3d; -webkit-transition: 0.5s; -moz-transform-style: preserve-3d; -moz-transition: 0.5s; -ms-transform-style: preserve-3d; -ms-transition: 0.5s; -o-transform-style: preserve-3d; -o-transition: 0.5s; transform-style: preserve-3d; transition: 0.5s; } .flip .card .face { width: 100%; height: 100%; position: absolute; z-index: 2; text-align: center; line-height: 100%; backface-visibility: hidden; /* W3C */ -webkit-backface-visibility: hidden; /* Safari & Chrome */ -moz-backface-visibility: hidden; /* Firefox */ -ms-backface-visibility: hidden; /* Internet Explorer */ -o-backface-visibility: hidden; /* Opera */ } .flip .card .front { height: 100%; position: absolute; z-index: 1; color: white; cursor: pointer; } .flip .card .back { height: 100%; position: absolute; cursor: pointer; transform:rotatey(-180deg); -ms-transform:rotatey(-180deg); /* IE 9 */ -moz-transform:rotatey(-180deg); /* Firefox */ -webkit-transform:rotatey(-180deg); /* Safari and Chrome */ -o-transform:rotatey(-180deg); /* Opera */ } </style> <script type="text/javascript"> /* card flip */ $( document ).ready(function() { $(".flip").click(function(){ $(this).find(".card").toggleClass("flipped"); return false; }); }); </script> </head> <body> <div class="row"> <div class="col-sm-6 col-md-4 col-lg-3"> <div class="flip"> <div class="card"> <div class="face front"> <div class="col-sm-12 col-md-12 col-lg-12"> <!-- BAR CHART --> <div class="box box-success"> <div class="box-header"> <h3 class="box-title">Overall Sales & Profit</h3> <div class = "flips" align="right" style="padding:8px; padding-right:13px;"> <img src="img/info2.png" width = "35" height = "35" alt="Info"> </div> </div> <div class="box-body chart-responsive"> <div class="chart" id="gross-chart"></div> </div><!-- /.box-body --> </div><!-- /.box --> </div> </div> <div class="face back"> <div class="col-sm-12 col-md-12 col-lg-12"> <div class="box box-success"> <div class="box-header"> <h3 class="box-title">Overall Sales & Profit</h3> <div class = "flips" align="right" style="padding:8px; padding-right:13px;"> <img src="img/graph.png" width = "35" height = "35" alt="Info"> </div> </div> <div class="box-body chart-responsive"> <table class="table table-condensed table-hover"> <thead> <tr class="active"> <th> </th> <th style="text-align:left">Title</th> <th style="text-align:center">Sales</th> <th style="text-align:center">Profit</th> </tr> </thead> <tbody style="text-align:left"> <tr> <td><img src="img/check.png" width = "20" height = "20" alt="Info"></td> <td>Jan</td> <td style="text-align:right">80,456.00</td> <td style="text-align:right">12,120.00</td> </tr> </tbody> </table> </div> </div> </div> </div>I have a flip effect working now when I click the whole div; see this link:
But what I want to achieve is, it will flip only when I click the I image or the info image at the top right of the div. Same with the image bar when I want to go back to the chart div.
This is what I have but when I change the .flip to the class name of the image it is not working.
$(".flip").click(function(){ $(this).find(".card").toggleClass("flipped"); return false; });My code;
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <style> .flip { -webkit-perspective: 300; -ms-perspective: 300; -moz-perspective: 300; -o-perspective: 300; width: 100%; height: 500px; position: relative; margin:auto; margin-top:20px; } .flip .card.flipped { transform:rotatey(-180deg); -ms-transform:rotatey(-180deg); /* IE 9 */ -moz-transform:rotatey(-180deg); /* Firefox */ -webkit-transform:rotatey(-180deg); /* Safari and Chrome */ -o-transform:rotatey(-180deg); /* Opera */ } .flip .card { width: 100%; height: 100%; -webkit-transform-style: preserve-3d; -webkit-transition: 0.5s; -moz-transform-style: preserve-3d; -moz-transition: 0.5s; -ms-transform-style: preserve-3d; -ms-transition: 0.5s; -o-transform-style: preserve-3d; -o-transition: 0.5s; transform-style: preserve-3d; transition: 0.5s; } .flip .card .face { width: 100%; height: 100%; position: absolute; z-index: 2; text-align: center; line-height: 100%; backface-visibility: hidden; /* W3C */ -webkit-backface-visibility: hidden; /* Safari & Chrome */ -moz-backface-visibility: hidden; /* Firefox */ -ms-backface-visibility: hidden; /* Internet Explorer */ -o-backface-visibility: hidden; /* Opera */ } .flip .card .front { height: 100%; position: absolute; z-index: 1; color: white; cursor: pointer; } .flip .card .back { height: 100%; position: absolute; cursor: pointer; transform:rotatey(-180deg); -ms-transform:rotatey(-180deg); /* IE 9 */ -moz-transform:rotatey(-180deg); /* Firefox */ -webkit-transform:rotatey(-180deg); /* Safari and Chrome */ -o-transform:rotatey(-180deg); /* Opera */ } </style> <script type="text/javascript"> /* card flip */ $( document ).ready(function() { $(".flip").click(function(){ $(this).find(".card").toggleClass("flipped"); return false; }); }); </script> </head> <body> <div class="row"> <div class="col-sm-6 col-md-4 col-lg-3"> <div class="flip"> <div class="card"> <div class="face front"> <div class="col-sm-12 col-md-12 col-lg-12"> <!-- BAR CHART --> <div class="box box-success"> <div class="box-header"> <h3 class="box-title">Overall Sales & Profit</h3> <div class = "flips" align="right" style="padding:8px; padding-right:13px;"> <img src="img/info2.png" width = "35" height = "35" alt="Info"> </div> </div> <div class="box-body chart-responsive"> <div class="chart" id="gross-chart"></div> </div><!-- /.box-body --> </div><!-- /.box --> </div> </div> <div class="face back"> <div class="col-sm-12 col-md-12 col-lg-12"> <div class="box box-success"> <div class="box-header"> <h3 class="box-title">Overall Sales & Profit</h3> <div class = "flips" align="right" style="padding:8px; padding-right:13px;"> <img src="img/graph.png" width = "35" height = "35" alt="Info"> </div> </div> <div class="box-body chart-responsive"> <table class="table table-condensed table-hover"> <thead> <tr class="active"> <th> </th> <th style="text-align:left">Title</th> <th style="text-align:center">Sales</th> <th style="text-align:center">Profit</th> </tr> </thead> <tbody style="text-align:left"> <tr> <td><img src="img/check.png" width = "20" height = "20" alt="Info"></td> <td>Jan</td> <td style="text-align:right">80,456.00</td> <td style="text-align:right">12,120.00</td> </tr> </tbody> </table> </div> </div> </div> </div>最满意答案
当你将$(".flip")更改$(".flips") ，不要忘记更改$(this)部分，因为它不再是$(".flip") ，而是$(".flips") ..
也许这就是你想要的：
$(".flips").click(function(){ $(".flip").find(".card").toggleClass("flipped"); return false; });When you change the $(".flip") to $(".flips"), don't forget to change $(this) part, because it's no longer $(".flip"), instead it's $(".flips")..
Maybe this is what you want:
$(".flips").click(function(){ $(".flip").find(".card").toggleClass("flipped"); return false; });更多推荐
发布评论