Блог

Главная - Вопросы по программированию - Эффект переворота после щелчка по изображению внутри div в jQuery

Эффект переворота после щелчка по изображению внутри div в jQuery

#javascript #jquery #css

#javascript #jquery ( jquery ) #css — код

Вопрос:

Теперь у меня работает эффект переворота, когда я щелкаю по всему div; смотрите Эту ссылку:

Но чего я хочу добиться, так это того, что он будет переворачиваться только тогда, когда я нажму на изображение I или информационное изображение в правом верхнем углу div. То же самое с панелью изображений, когда я хочу вернуться к div диаграммы.

Это то, что у меня есть, но когда я меняю .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 amp; 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 amp; 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 amp; 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>amp;nbsp;</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>

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

1. Пожалуйста, скопируйте / вставьте сюда соответствующие HTML и CSS с вашего сайта, чтобы мы могли помочь вам и быть полезными для будущих посетителей.

Ответ №1:

Когда вы меняете значение $(".flip") на $(".flips") , не забудьте изменить $(this) часть, потому что ее больше $(".flip") нет, вместо этого $(".flips") она есть ..

Может быть, это то, что вы хотите:

 $(".flips").click(function(){
  $(".flip").find(".card").toggleClass("flipped");
  return false;
});

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

1. Теоретически, нехорошо использовать class атрибут для программирования поведения веб-страниц, потому что многие элементы могут иметь один и тот же класс. Вместо этого используйте другой атрибут id, подобный этому : <div class="flips" id="flip-1"></div> <div class="flips" id="flip-2"></div>

2. Еще раз спасибо! @user3003216, я сделал то, что вы посоветовали, и теперь это работает.

Метки: