Как добавить кликом по ссылке class для div?

Question

[Антон]

https://codepen.io/anon/pen/ajQrLK
Есть div class="photo", как добавить кликом по ссылке, чтобы было div class="photo rotate90"
А в идеале, чтобы каждое нажатие на ссылку делало один поворот по часовой стрелке на 90 градусов.

Answer 1

[BarryHAllen]

<a href="#" id="rad90" onclick=someFunc()>Повернуть на 90 градусов</a>

var a = 0;
function someFunc() {
  a = a + 90;
  document.getElementById("image").style.transform = "rotate("+a+"deg)";
}

https://codepen.io/anon/pen/ajQraR

Answer 2

[0xD34F]

в идеале, чтобы каждое нажатие на ссылку делало один поворот по часовой стрелке на 90 градусов

Можно сделать несколько классов, для каждого из которых определён свой поворот, и последовательно их менять:

.rotate0   { transform: rotate(0deg); }
.rotate90  { transform: rotate(90deg); }
.rotate180 { transform: rotate(180deg); }
.rotate270 { transform: rotate(270deg); }

<a href="#" data-rotate="-1">Повернуть на -90 градусов</a>
<a href="#" data-rotate="+1">Повернуть на +90 градусов</a>

const photo = document.querySelector('.photo');
const classes = [ 'rotate0', 'rotate90', 'rotate180', 'rotate270' ];
let index = 0;

document.addEventListener('click', function(e) {
  const rotate = +e.target.dataset.rotate;
  if (rotate) {
    photo.classList.remove(classes[index]);
    index = (index + rotate + classes.length) % classes.length;
    photo.classList.add(classes[index]);
  }
});

UPD. Вынесено из комментариев:

а можно пример, чтобы поворачивать по 1 градусу и в обратную сторону

Для поворота по одному градусу я конечно не стал бы делать отдельные классы, а вписывал бы нужное значение в style.transform:

<a href="#" data-rotate="-1">rotate ccw</a>
<a href="#" data-rotate="+1">rotate cw</a>

const photo = document.querySelector('.photo');
let angle = 0;

document.querySelectorAll('[data-rotate]').forEach(n => n.addEventListener('click', onClick));

function onClick({ target: { dataset: { rotate } } }) {
  angle = (angle + +rotate + 360) % 360;
  photo.style.transform = `rotate(${angle}deg)`;
}

Comments

[Антон]

Вы гений!

[ⓒⓢⓢ]

интересное решение, а можно пример, чтобы поворачивать по 1 градусу и в обратную сторону

[0xD34F]

JRK_DV, дополнил ответ.

Answer 3

[Andrej Sharapov]

$('#as').click(function() {
  $('#bsm').toggleClass('active');
})

Подгоняйте под свои данные