Pokazywanie zawartości i zmiana rotacji przycisku

MIKEKING · 27 Lipca 2017

Witam. Zwracam się do was z problemem który mnie dręczy od kilku godzin. Problem jest prosty dla ludzi którzy siedzą w JavaScript. Chodzi o to, że próbuję zrobić "FocusBottom" chyba tak to można nazwać. Dokładniej chodzi o ( Gdy użytkownik kliknie w przycisk ten obróci się o 90deg i zatrzyma się. Przycisk ten będzie aktywny dopóki użytkownik go odkliknie.) Próbowałem z slideToggle, ale nie wiem jak zrobić to z css czyli ten cały obrót i zatrzymanie. Proszę o szybką pomoc. Limit za pomoc.

Jakub · 27 Lipca 2017

transform: rotate(90deg);

Możesz zrobić klasę rotated i dodawac/usuwać ją za pomocą js, cała filozofia.

Damian_RastMan · 28 Lipca 2017

Kod o którym myśli kolega wyżej:

CSS:

.rotated {
	transform: rotate(90deg);
}

HTML:

<head>
  <script src="jquery-3.2.1.min.js"></script>
</head>
<body>
  <button class="toRotate">Kliknij Mnie</button>
</body>

JS:

$(document).ready(function(){
  $('.toRotate').click(function(){
      if($(this).hasClass("rotated")){
          $(this).addClass("rotated");
      }
      else {
          $(this).removeClass("rotated");
      }
  })
});

Nie testowałem, mogą być literówki etc.

Jakub · 29 Lipca 2017

Po co jQuery?

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #toRotate {
            transition: 0.5s;
        }
        .rotated {
            transform: rotate(90deg);
            transition: 0.5s;
        }
    </style>
</head>
<body>
<img id="toRotate" src="image/image.png" alt="image"/>
<button class="rotate">Rotate</button>

<script>
  'use strict';

  var elements = document.getElementsByClassName('rotate');

  Array.from(elements).forEach(function (el) {
    el.addEventListener('click', function (e) {
      var elToRotate = document.getElementById('toRotate');

      if (!elToRotate.classList.contains('rotated')) {
        elToRotate.classList.add('rotated');
      } else {
        elToRotate.classList.remove('rotated');
      }
    });
  });
</script>
</body>
</html>

Bez zbędnego ładowania opasłego liba.

Zaloguj się

👋 Witaj na MPCForum!

Pokazywanie zawartości i zmiana rotacji przycisku

Pytanie

MIKEKING

MIKEKING

3 odpowiedzi na to pytanie

Rekomendowane odpowiedzi

Jakub

Jakub

Damian_RastMan

Damian_RastMan

Jakub

Jakub

Zarchiwizowany