Как повернуть некоторые изображения с тем же классом, когда нажимаете на ссылку навигации - с jquery & css

Question

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

Существует простая версия этого:

jQuery(document).ready(function($) { 

$(document).ready(function() { 
    $("#nav ul li a").click(function() { 
     $(".cog").css(
     {'-webkit-transform' : 'rotate(70deg)', 
     '-moz-transform' : 'rotate(70deg)', 
     '-ms-transform' : 'rotate(70deg)', 
     'transform' : 'rotate(70deg)'}); 
    }); 
}); 

}); 

    <header> 

     <div id="header_image"> 

      <img id="cog" style="display: block;" class="cog" src="images/cog01.png"> 
      <img class="cog" src="images/cog02.png"> 
      <img class="cog" src="images/cog03.png"> 

     </div> 

     <nav id="#nav"> 

      <ul id="fo_menu"> 
       <li id="fooldal" class="first"><a href="index.php">Főoldal</a></li> 
       <li id="menu_separator"></li> 
       <li id="bemutatkozas"><a href="index.php?oldal=1">Bemutatkozás</a></li> 
      </ul> 

     </nav> 

    </header> 

Answer 1

У вас пару критических проблем.

1. Вы должны preventDefault() на ваших <a> кликов, в противном случае пользователь будет следовать по ссылке и никогда не увидеть ваши преобразования.
2. Ваш id на вашем <nav> теге неверно. Он не должен иметь префикс #.

Кроме того, есть несколько незначительных вопросов, которые должны быть очищены, но не нарушая ваш код:

1. У вас есть дважды обернут свой document.ready() обработчик. Нет необходимости в объявлении дополнительной функции.
2. Чтобы настроить таргетинжируемые объекты, вы можете использовать $("#nav a"), так как a является потомок из #nav. Если вы хотите настроить таргетинг только на конкретную структуру , ваш селектор будет $("#nav > ul > li > a").

Если вы вносите эти изменения, код должен работать так же, как в примере ниже.

$(document).ready(function() { 
 
    $("#nav a").click(function (e) { 
 
    e.preventDefault(); 
 
    $(".cog").css(
 
     {'-webkit-transform' : 'rotate(70deg)', 
 
     '-moz-transform' : 'rotate(70deg)', 
 
     '-ms-transform' : 'rotate(70deg)', 
 
     'transform' : 'rotate(70deg)'}); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="header_image"> 
 
    <img id="cog" style="display: block;" class="cog" src="http://lorempixel.com/100/100/" /> 
 
    <img class="cog" src="http://lorempixel.com/100/100/" /> 
 
    <img class="cog" src="http://lorempixel.com/100/100/" /> 
 
</div> 
 

 
<nav id="nav"> 
 
    <ul id="fo_menu"> 
 
    <li id="fooldal" class="first"><a href="index.php">Főoldal</a></li> 
 
    <li id="menu_separator"></li> 
 
    <li id="bemutatkozas"><a href="index.php?oldal=1">Bemutatkozás</a></li> 
 
    </ul> 
 
</nav>