Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 14.10.2017, 15:03
Новичок на форуме
Отправить личное сообщение для Illibes Посмотреть профиль Найти все сообщения от Illibes
 
Регистрация: 14.10.2017
Сообщений: 3

Получение номера класса, по которому произведен клик
Добрый день, уважаемые форумчани. Заранее прошу не кидать в меня камнями. Перед мною встала задача, которую можно было бы решить намного проще используя "GetElementById", но все таки я хочу реализовать задумку именно так.
Суть в том, что есть меню опций, с одинаковыми цсс классами. По клике на каждый из них рядом с ним должна появится галочка - (отмечено, мол), по еще одному клику - галочка должна снятся. С добавлением галчоки (в моем случае img) особых пробелм не возникло, а вот с удалением - нужна ваша помощь.
Собственно, вот мой быдло-код:
<script>
           $(document).ready(function()
            { 
            	$(".round-img").click(function()
            	{
                   var clicked = document.getElementsByClassName('setting-row');
                   for (var i = 0; i < clicked.length; i++)
                   	{
	                	clicked[i].addEventListener("click", adding);
	                	
	                	function adding(){ 
	                		{
	                    		var o=document.createElement('img');
	                    	  	o.src='img/system/yes.png';
	               				o.className="yes-marker";
                        		this.appendChild(o);
                        		 /*console.log($(this));*/
                        		
                 			}
                 		

	                     	 if (this.appendChild(o))
                        		{
	                            		clicked[i].addEventListener("click", del)
	                            			function del()
	                            			{
	                            			this.removeChild(o);

                        				}
                        			};
                        			}
               						
                        	}
					})
					}) 
            
              

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

Illibes,
минимальный html и css сделайте, и лучше не назначать клик в клике, если нет цели исчерпать ресурсы.
Ответить с цитированием
  #3 (permalink)  
Старый 14.10.2017, 17:08
Новичок на форуме
Отправить личное сообщение для Illibes Посмотреть профиль Найти все сообщения от Illibes
 
Регистрация: 14.10.2017
Сообщений: 3

дело в том, что css и html мне как раз аткки править не желательно. Но свою ошибку я уже, кажется, нашел.. итый элемент все арвно попросту доходил до конца и был равен десяти.
Решение, которое более лаконично и как по мне правильно, не до конца у меня работает, но это вопрос времени:
(function () {
    var divs = document.querySelectorAll(".setting-row");
    var handler = function() {
        var index = Array.prototype.indexOf.call(divs, this);
        var o=document.createElement('img');
	o.src='img/system/yes.png';
	o.className="yes-marker";
    document.getElementsByClassName('setting-row')[index].appendChild(o);
       
    }
    
    for (var i = 0; i < divs.length; i++) {
        divs[i].onclick = handler;
 }());
Ответить с цитированием
  #4 (permalink)  
Старый 14.10.2017, 17:26
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,121

Illibes,
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .setting-row{
      border: 1px dashed Gray; padding: 5px; height: 100px; width: 100px ;
      background-color: rgba(139, 69, 19, 1);
  }

  </style>

  <script>

 window.addEventListener('DOMContentLoaded', function() {
  var o=document.createElement('img');
  o.src='http://superadm.net/uploads/icons/camera_test.png';
  o.classList.add("yes-marker");  
  var divs = document.querySelectorAll(".setting-row");
  [].forEach.call(divs, function(item) {
          item.addEventListener('click', function() {
              var img = item.querySelector('.yes-marker');
              if (img)  item.removeChild(img);
              else item.appendChild(o.cloneNode())
          });
      });

  });

  </script>
</head>

<body>
<div class="setting-row"></div>
<div class="setting-row"></div>
<div class="setting-row"></div>
</body>
</html>

Последний раз редактировалось рони, 14.10.2017 в 17:44.
Ответить с цитированием
  #5 (permalink)  
Старый 14.10.2017, 17:45
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,121

Illibes,
пост №4 запустите код и кликайте по блокам
Ответить с цитированием
  #6 (permalink)  
Старый 15.10.2017, 13:45
Новичок на форуме
Отправить личное сообщение для Illibes Посмотреть профиль Найти все сообщения от Illibes
 
Регистрация: 14.10.2017
Сообщений: 3

Вы просто лучший
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Клик по одному элементу добавление класса у второго элемента, кликаем по третьему эле aleksandr8i Общие вопросы Javascript 1 24.09.2015 11:25
Получение имя класса по id Гугл-мен Элементы интерфейса 1 20.10.2013 17:02
Получение значения свойства из класса. Duda.Ml1986@gmail.com Серверные языки и технологии 4 30.07.2013 05:22
Использование классов в JavaScript devote Ваши сайты и скрипты 70 01.02.2013 17:17
Получение номера ячейки в CallServer() Ваяс Элементы интерфейса 2 11.01.2012 11:26