Метод jquery .find() не будет работать

Question

Ну, я пытаюсь сделать своего рода кнопку обрушения, ведь когда я дважды нажимаю кнопку, функция вращения больше не работает.

Я не уверен, что это метод .find(), который не работает, или сама функция rotate.

Вот jsfiddle ссылка:

http://jsfiddle.net/XgX5m/2/

HTML:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
<script src="https://jquery-rotate.googlecode.com/files/jquery.rotate.1-1.js"></script> 
<div class="info"> 
      <div> 
       <div class="title"> 
        <div><img src="http://i.imgur.com/phLHqY3.png"/></div> 
        <div>Lorem Ipsum</div> 
       </div> 
       <div class="infot"> 
        Teckentrup - seit über 80 Jahren am Markt - ist bis heute der einzige unter den führenden Anbietern von Türen und Toren, der vom Brandschutz kommt. Wir haben nicht nur die gesamte Entwicklung in diesem Bereich mitgeprägt und begleitet. Die hohen Sicherheitsanforderungen standen auch Pate, als wir umfangreiche Kompetenzen in weiteren Feldern der Funktionstüren aufgebaut haben. 
       </div> 
      </div> 
      <div> 
       <div class="title"> 
        <div><img src="http://i.imgur.com/phLHqY3.png"/></div> 
        <div>Lorem Ipsum</div> 
       </div> 
       <div class="infot"> 
        Teckentrup - seit über 80 Jahren am Markt - ist bis heute der einzige unter den führenden Anbietern von Türen und Toren, der vom Brandschutz kommt. Wir haben nicht nur die gesamte Entwicklung in diesem Bereich mitgeprägt und begleitet. Die hohen Sicherheitsanforderungen standen auch Pate, als wir umfangreiche Kompetenzen in weiteren Feldern der Funktionstüren aufgebaut haben. 
       </div> 
      </div> 
     </div> 

CSS:

.info { 
    margin:15px 30px; 
    background:#fff; 
    border-radius:2px; 
    padding:20px; 
} 

.info .title { 
    display:flex; 
    font-size:22px; 
    padding:5px 0; 
    border-bottom:dashed 1px #C0C0C0; 
} 

.info .title:hover { 
    cursor:pointer !important; 
} 
.info .title img { 
    vertical-align:middle; 
} 

.info .infot { 
    color:#9C9C9C; 
    font-size:14px; 
    padding:10px 0; 
} 

JQuery:

$(document).ready(function() { 
    $('.info .infot').hide(); 
    $('.info .title').click(function() { 
     if ($(this).siblings('.infot').is(':visible')) { 
      $(this).siblings('.infot').slideUp('fast'); 
      $(this).find('img').rotateLeft(); 
     } else { 
      $(this).siblings('.infot').slideDown('fast'); 
      $(this).find('img').rotateRight(); 
     } 
    }); 
}); 

Answer 1

Этот плагин вы используете вращает оригинальный <img> тег в <canvas>. Вы можете сделать свой код таким:

 $(this).find('img, canvas').rotateLeft(); 

Лично я хотел бы найти лучший плагин.

Answer 2

Pure CSS вращающееся, так как вы просили лучшей альтернативы:

CSS:

img.rotateRight { 
    -ms-transform: rotate(90deg); /* IE 9 */ 
    -webkit-transform: rotate(90deg); 
    transform: rotate(90deg); 
} 

JS:

$(document).ready(function() { 
    $('.info .infot').hide(); 
    $('.info .title').click(function() { 
     var img = $(this).find('img'); 
     if ($(this).siblings('.infot').is(':visible')) { 
      $(this).siblings('.infot').slideUp('fast'); 
     } else { 
      $(this).siblings('.infot').slideDown('fast'); 
     } 
     img.toggleClass('rotateRight'); 
    }); 
}); 

DEMO

Answer 3

Please use below code on fiddle 

When you are open accordion then image turn into canvas so at time of close accordion you can get image that already turn in canvas 

============================= 
$(document).ready(function() { 
    $('.info .infot').hide(); 
    $('.info .title').click(function() { 
     if ($(this).siblings('.infot').is(':visible')) { 
      $(this).siblings('.infot').slideUp('fast'); 
      $(this).find('canvas').rotateLeft(); 
     } else { 
      $(this).siblings('.infot').slideDown('fast'); 
      $(this).find('img,canvas').rotateRight(); 
     } 
    }); 
}); 
=================================================== 

Answer 4

Вы можете использовать CSS для этого, DEMO

$(document).ready(function() { 
     $('.info .infot').hide(); 
     $('body').on('click','.info .title',function() { 
      if ($(this).siblings('.infot').is(':visible')) { 
       $(this).siblings('.infot').slideUp('fast'); 
       $(this).find('img').css('transform','rotate(0deg)'); 
      } else { 
       $(this).siblings('.infot').slideDown('fast'); 
       $(this).find('img').css('transform','rotate(90deg)'); 
      } 
     }); 
    }); 

Answer 5

info не является родителем img его великого родителя. поэтому, возьмите ребенка с информацией и ребенком в информационном классе ребенка. -

$(document).ready(function() { 
    $('.info .infot').hide(); 
    $('.info .title').click(function() { 
     alert($(this).siblings('.infot').is(':visible')) 
     if ($(this).siblings('.infot').is(':visible')) { 
      $(this).siblings('.infot').slideUp('fast'); 
      $(this).children().children('canvas').css('transform', 'rotate(-90deg)'); 
     } else { 
      $(this).siblings('.infot').slideDown('fast'); 
      $(this).children().children('img').rotateRight(); 
     } 
    }); 
});