Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 17.06.2018, 20:19
Интересующийся
Отправить личное сообщение для Sevic Посмотреть профиль Найти все сообщения от Sevic
 
Регистрация: 04.02.2018
Сообщений: 17

Поменять класс у выбранного элемента по клику
Подскажите что делаю не так:

<!DOCTYPE html>
<head>
<title></title>
</head>
<style>
.square {
	width:200px;
	height:200px;
	background-color:yellow;
	float: left;
	margin-right: 25px;
}
.square-new {
	width:300px;
	height:300px;
	background-color:red;
	float: left;
	margin-right: 25px;
}
</style>
<body>
  <div id="ppp">
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
  </div>
<script type="text/javascript">

  new changeClass({el: '.square'});

  function changeClass(el) {
  
    this.el = document.querySelectorAll(el.el)
	this.btPrev = document.querySelectorAll(el.el)
	
	function deselectAll() {
        this.el.classList.remove('.square-new ');
    };
	
    this.item = function() {
		deselectAll();
		this.el.classList.add('.square-new');
	};

	this.btPrev.addEventListener('click', this.item.bind(this));
  };

</script>
</body>
</html>
Ответить с цитированием
  #2 (permalink)  
Старый 17.06.2018, 20:27
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Sevic,
нужен цикл по всем элементам, нет в js массивного назначения, типа querySelectorAll().addEventListener
Ответить с цитированием
  #3 (permalink)  
Старый 17.06.2018, 20:33
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Sevic,
возможно вы изобретали делегирование
Ответить с цитированием
  #4 (permalink)  
Старый 17.06.2018, 20:42
Интересующийся
Отправить личное сообщение для Sevic Посмотреть профиль Найти все сообщения от Sevic
 
Регистрация: 04.02.2018
Сообщений: 17

Сообщение от рони Посмотреть сообщение
Sevic,
возможно вы изобретали делегирование
Да, именно, делегирование!)))
Ответить с цитированием
  #5 (permalink)  
Старый 17.06.2018, 20:47
Интересующийся
Отправить личное сообщение для Sevic Посмотреть профиль Найти все сообщения от Sevic
 
Регистрация: 04.02.2018
Сообщений: 17

Сообщение от рони Посмотреть сообщение
Sevic,
возможно вы изобретали делегирование
Большое спасибо!
Ответить с цитированием
  #6 (permalink)  
Старый 17.06.2018, 21:12
Интересующийся
Отправить личное сообщение для Sevic Посмотреть профиль Найти все сообщения от Sevic
 
Регистрация: 04.02.2018
Сообщений: 17

Сообщение от рони Посмотреть сообщение
Sevic,
нужен цикл по всем элементам, нет в js массивного назначения, типа querySelectorAll().addEventListener
если делать через цикл, то можно все методы сделать в одном цикле или на каждый свой цикл?
Ответить с цитированием
  #7 (permalink)  
Старый 17.06.2018, 21:13
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,650

можно все в одном
Ответить с цитированием
  #8 (permalink)  
Старый 17.06.2018, 21:20
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,650

это хотите сделать?

у вас там ошибки еще в метод add и remove название класса без точек надо

<div id="ppp">
    <div class="square">1</div>
    <div class="square">1</div>
    <div class="square">1</div>
    <div class="square">1</div>
  </div>
	<script>
document.querySelector('#ppp').onclick = e => e.target.matches('.square') && e.target.classList.toggle('square-new');
	</script>

Последний раз редактировалось j0hnik, 17.06.2018 в 21:22.
Ответить с цитированием
  #9 (permalink)  
Старый 17.06.2018, 22:48
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

поменять класс элемента по клику
Сообщение от Sevic
если делать через цикл,
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<style>
#ppp{
    display: flex;
}

.square {
    width:100px;
    height:100px;
    background-color:yellow;
    margin-right: 25px;
    transition: 1s;
}
.square-new {
    width:150px;
    height:150px;
    background-color:red;
    margin-right: 25px;
}
</style>
<body>
    <div id="ppp">
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
    </div>
<script>
var fn = new changeClass({
    el: ".square",
    cls: "square-new"
});

function changeClass(el) {
    var self = this;
    self.el = document.querySelectorAll(el.el);
    self.Prev = document.querySelector(el.el);
    changeClass.prototype.select = function(elem) {
        this.deselect();
        this.Prev = elem;
        this.Prev.classList.add(el.cls)
    };
    changeClass.prototype.deselect = function() {
        this.Prev.classList.remove(el.cls)
    };
    changeClass.prototype.selectNum = function(num) {
        this.select(this.el[num])
    };
    [].forEach.call(self.el, function(node) {
        node.addEventListener("click", self.select.bind(self, node))
    });
    return self
}
window.setTimeout(function() {
    fn.selectNum(2)
}, 1000);
window.setTimeout(function() {
    fn.deselect()
}, 3000);

</script>
</body>
</html>

Последний раз редактировалось рони, 17.06.2018 в 22:51.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Замена id элемента по клику кнопки zapalych Общие вопросы Javascript 12 30.06.2017 16:23
Как поменять класс элемента если он покидает видимую область стр mitrich38 Events/DOM/Window 11 02.07.2016 13:38
Изменить класс элемента в зависимости от разрешения экрана funfot (X)HTML/CSS 1 19.09.2014 20:15
Изменить класс родительского элемента STyLe Общие вопросы Javascript 1 29.05.2014 20:21
Как в общем меню для всех страниц поменять класс определенного пункта в зависимости о phenom Элементы интерфейса 2 08.04.2011 11:09