0 / 0 / 0
Регистрация: 22.01.2017
Сообщений: 32
1

Поменять классы у дивов местами

14.07.2017, 10:59. Показов 1179. Ответов 4
Метки нет (Все метки)

Author24 — интернет-сервис помощи студентам
К примеру есть 3 дива, нужно при клике на первый див - запомнить его класс, после чего кликнуть еще на 2й див - таким образом запомнили и его класс, и поменять их. Первому присвоить второго, Второму присвоить первого.

Очень нужен ответ буду благодарен за помощь
0
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
14.07.2017, 10:59
Ответы с готовыми решениями:

Поменять местами
Здравствуйте. У меня следующая проблема. У меня есть 4 картинки и 2 поля ввода. В поля ввода...

Поменять местами id у div
доброго времени суток, необходимо поменять местами id у div-ов. Есть такой код: <div class =...

Поменять местами буквы в слове
Здраствуйте друзья кто поможет с задачей? Мне надо Имя Город так сделать чтоб Г было в место Д а Д...

Поменять местами картинки на странице
Документ разделён на 2 области. Каждая из областей содержит ряд картинок. При щелчке на картинке...

4
2169 / 1652 / 840
Регистрация: 10.01.2015
Сообщений: 5,190
14.07.2017, 12:47 2
PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<div class="qwe">qwe</div>
<div class="rty">rty</div>
<div class="uio">uio</div>
 
<script>
document.querySelector('div.qwe').addEventListener("click", function(){
  localStorage.setItem('div_qwe', this.getAttribute('class'));
  alert('Класс ' + this.getAttribute("class") + ' записан');
})
document.querySelector('div.rty').addEventListener("click", function(){
  if(localStorage.getItem('div_qwe')){
    localStorage.setItem('div_rty', this.getAttribute('class'));
    document.querySelector('div.qwe').setAttribute('class', localStorage.getItem('div_rty'));
    this.setAttribute('class', localStorage.getItem('div_qwe'));
    localStorage.clear();
    alert('Классы перезаписаны. Хранилище очищено');
  }else{
    alert('Элемент ' + document.querySelector('div.qwe').getAttribute("class") + ' не записан. Кликните по первому диву');
  }
})
</script>
Добавлено через 1 минуту
https://jsfiddle.net/ocj0cmev/
0
0 / 0 / 0
Регистрация: 22.01.2017
Сообщений: 32
14.07.2017, 14:04  [ТС] 3
Спасибо, сейчас буду пробовать
0
Superposition
950 / 615 / 256
Регистрация: 27.10.2013
Сообщений: 2,083
14.07.2017, 20:52 4
pryda-vlad,
HTML5
1
2
3
<div class="a">A</div>
<div class="b">B</div>
<div class="c">C</div>
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
div {
  width: 100px;
  height: 100px;
  border: 1px solid;
}
 
.a {
  color: white;
  background: red;
}
 
.b {
  color: white;
  background: green;
}
 
.c {
  color: white;
  background: blue;
}
Javascript
1
2
3
4
5
6
let [a, b, c] = document.querySelectorAll('.a, .b, .c');
 
document.addEventListener('mousedown', () => {
  [a.className, b.className] = [b.className, a.className]; // меняем a <=> b
  [b.className, c.className] = [c.className, b.className]; // меняем b <=> c
})
это то что выплюнул babel:
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
'use strict';
 
var _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }();
 
var _document$querySelect = document.querySelectorAll('.a, .b, .c'),
    _document$querySelect2 = _slicedToArray(_document$querySelect, 3),
    a = _document$querySelect2[0],
    b = _document$querySelect2[1],
    c = _document$querySelect2[2];
 
document.addEventListener('mousedown', function () {
  // меняем a <=> b
  var _ref = [b.className, a.className];
  a.className = _ref[0];
  b.className = _ref[1];
  // меняем b <=> c
  var _ref2 = [c.className, b.className];
  b.className = _ref2[0];
  c.className = _ref2[1];
});
пример в песочнице
can I use className
0
the hardway first
Эксперт JS
2461 / 1836 / 906
Регистрация: 05.06.2015
Сообщений: 3,603
18.07.2017, 09:32 5
HTML5
1
2
3
4
5
6
7
8
9
10
11
<div class="target">
  <div class="one">
    One
  </div>
  <div class="two">
    Two
  </div>
  <div class="three">
    Three
  </div>
</div>
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
var App = {};
 
App.init = function() {
  App.action = App.select;
  var divs = document.querySelectorAll('.target > div');
  for (var i = 0, l = divs.length; i < l; i++) {
    divs[i].addEventListener('click', function(event) {
      App.action(event);
    });
  }
}
 
App.select = function(e) {
  App.selectedItem = e.target;
  App.action = App.toggle;
}
 
App.toggle = function(e) {
  var tmp = e.target.className;
  e.target.className = App.selectedItem.className;
  App.selectedItem.className = tmp;
  App.action = App.select;
}
 
document.addEventListener('DOMContentLoaded', App.init);
https://jsfiddle.net/j2FunOnly/douygttn/
0
18.07.2017, 09:32
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
18.07.2017, 09:32
Помогаю со студенческими работами здесь

Поменять местами два элемента
Добрый день, подскажите пожалуйста. У меня есть код &lt;div class=&quot;rightCenter&quot;&gt; &lt;div...

Поменять местами элементы массива
Доброго времени суток, подскажите как можно поменять местами элементы массива при выборе...

Поменять две картинки местами по клику
Есть две картинки, как сделать, чтобы по клику они менялись местами? Надо использовать onclick

Поменять местами первое и последнее слово
Ребят, помогите пожалуйста доделать скрипт. Надо поменять местами первое и последнее слово....


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
5
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2024, CyberForum.ru