Warning: Cannot use a scalar value as an array in /home/admin/public_html/forum/include/fm.class.php on line 757

Warning: Invalid argument supplied for foreach() in /home/admin/public_html/forum/include/fm.class.php on line 770

Warning: Invalid argument supplied for foreach() in /home/admin/public_html/forum/topic.php on line 737
Форумы портала PHP.SU :: Как выделить все?

 PHP.SU

 Программирование на PHP, MySQL и другие веб-технологии
PHP.SU Портал     На главную страницу форума Главная     Помощь Помощь     Поиск Поиск     Поиск Яндекс Поиск Яндекс     Вакансии  Пользователи Пользователи


 Страниц (1): [1]   

> Без описания
Поиск в теме | Версия для печати
Alex213
Отправлено: 21 Июля, 2015 - 09:31:19
Post Id


Новичок


Покинул форум
Сообщений всего: 47
Дата рег-ции: Июль 2015  


Помог: 0 раз(а)
CODE (javascript):
скопировать код в буфер обмена
  1. //дожидаемся полной загрузки страницы
  2. window.onload = function () {
  3.  
  4.     //получаем идентификатор элемента
  5.     var a = document.getElementById('switch');
  6.    
  7.     //вешаем на него событие
  8.     a.onclick = function() {
  9.         //производим какие-то действия
  10.         if (this.innerHTML=='<img src="img/ico/viem_p.png">') this.innerHTML = '<img src="img/ico/viem_c.png">';
  11.         else this.innerHTML = '<img src="img/ico/viem_p.png">';
  12.         //предотвращаем переход по ссылке href
  13.         return false;
  14.     }
  15.    
  16. }

есть код, при нажатии на светлый кружок, он становится темным, как сделать чтоб при нажатии на кнопку выделить все все кружки становились темными?
Прикреплено изображение (Нажмите для увеличения)
123312.png
 
 Top
DeepVarvar Супермодератор
Отправлено: 21 Июля, 2015 - 09:42:29
Post Id



Активный участник


Покинул форум
Сообщений всего: 10377
Дата рег-ции: Дек. 2008  
Откуда: Альфа Центавра


Помог: 353 раз(а)
Alex213 пишет:
дожидаемся полной загрузки страницы
А еще гасим этой строчкой все остальные события, которые тоже дожидались загрузки, т.е. ничего кроме этого работать не будет.
Alex213 пишет:
производим какие-то действия
Это странные действия. Гораздо проще дать булевое св-во этому элементу, его и проверять, вместо innerHTML.
Alex213 пишет:
чтоб при нажатии на кнопку выделить все
Выбрать кнопку, выбрать все, по клику на кнопку обежать в цикле все, сделать что надо.
 
 Top
Alex213
Отправлено: 21 Июля, 2015 - 09:53:10
Post Id


Новичок


Покинул форум
Сообщений всего: 47
Дата рег-ции: Июль 2015  


Помог: 0 раз(а)
Alex213 пишет:
производим какие-то действия
Это странные действия. Гораздо проще дать булевое св-во этому элементу, его и проверять, вместо innerHTML.
Alex213 пишет:
чтоб при нажатии на кнопку выделить все
Выбрать кнопку, выбрать все, по клику на кнопку обежать в цикле все, сделать что надо.[/quote]

А можете поподробнее написать или пример какой подсказать, я в этом на уровне чайника?

(Отредактировано автором: 21 Июля, 2015 - 09:54:44)

 
 Top
Tyoma5891
Отправлено: 21 Июля, 2015 - 10:32:49
Post Id


Частый посетитель


Покинул форум
Сообщений всего: 621
Дата рег-ции: Авг. 2013  


Помог: 5 раз(а)
ну если больше никаких картинок нет, то можно сделать совсем просто:
CODE (javascript):
скопировать код в буфер обмена
  1. $( "#button" ).click(function() {
  2. $("img").prop("src", "img/ico/viem_c.png");
  3. });
 
 Top
Alex213
Отправлено: 21 Июля, 2015 - 10:44:54
Post Id


Новичок


Покинул форум
Сообщений всего: 47
Дата рег-ции: Июль 2015  


Помог: 0 раз(а)
Tyoma5891 пишет:
ну если больше никаких картинок нет, то можно сделать совсем просто:
CODE (javascript):
скопировать код в буфер обмена
  1. $( "#button" ).click(function() {
  2. $("img").prop("src", "img/ico/viem_c.png");
  3. });


Может я и неправильно что-то делаю, но ничего не получается

CODE (javascript):
скопировать код в буфер обмена
  1.                              <script type="text/javascript">
  2.  
  3. $( "#button" ).click(function() {
  4. $("img").prop("src", "img/ico/viem_c.png");
  5. });
  6.  
  7. </script>
  8.  

CODE (html):
скопировать код в буфер обмена
  1. <a id="button" href=""><img src="img/ico/viem_p.png"></a>
 
 Top
Tyoma5891
Отправлено: 21 Июля, 2015 - 10:50:30
Post Id


Частый посетитель


Покинул форум
Сообщений всего: 621
Дата рег-ции: Авг. 2013  


Помог: 5 раз(а)
а так
CODE (javascript):
скопировать код в буфер обмена
  1. $(document).ready(function() {
  2. $( "#button" ).click(function() {
  3. $("img").attr("src", "img/ico/viem_c.png");
  4. });
  5. });
  6.  
 
 Top
Alex213
Отправлено: 21 Июля, 2015 - 11:08:08
Post Id


Новичок


Покинул форум
Сообщений всего: 47
Дата рег-ции: Июль 2015  


Помог: 0 раз(а)
Tyoma5891 пишет:
а так
CODE (javascript):
скопировать код в буфер обмена
  1. $(document).ready(function() {
  2. $( "#button" ).click(function() {
  3. $("img").attr("src", "img/ico/viem_c.png");
  4. });
  5. });
  6.  



Спасибо конечно, но у меня все ссылки с картинками меняет на данный кружок, при клике, а потом обновляется в первоначальный вариант. Попробовал return false прописать, тогда не обновляется, но проблема с тем, что все картинки, что есть поменялись на кружки осталась, и еще мне нужно, чтоб при нажатии второй раз кружок вновь становиллся светлым
 
 Top
Viper
Отправлено: 21 Июля, 2015 - 11:14:59
Post Id



Активный участник


Покинул форум
Сообщений всего: 4555
Дата рег-ции: Февр. 2007  
Откуда: Симферополь


Помог: 98 раз(а)
Alex213 упростите себе жизнь! Используйте CSS!


-----
Список фильмов с описанием, блекджеком и... для Joomla? -> https://киноархив[dot]com
Демо нового движка для сайта php.su -> php[dot]su, проект на гитхабе
 
 Top
Alex213
Отправлено: 21 Июля, 2015 - 11:26:34
Post Id


Новичок


Покинул форум
Сообщений всего: 47
Дата рег-ции: Июль 2015  


Помог: 0 раз(а)
Viper пишет:
Alex213 упростите себе жизнь! Используйте CSS!


Как именно?
 
 Top
Viper
Отправлено: 21 Июля, 2015 - 17:13:49
Post Id



Активный участник


Покинул форум
Сообщений всего: 4555
Дата рег-ции: Февр. 2007  
Откуда: Симферополь


Помог: 98 раз(а)
Alex213 пишет:
Как именно?
вы меняете картинки в <img>
Переделайте на <div> и задайте класс CSS по умолчанию к примеру light-gray.

CODE (htmlphp):
скопировать код в буфер обмена
  1. .gray {
  2.         background: #333 url("img/ico/viem_p.png") no-repeat center center;
  3. }
  4.  
  5. .ligh-gray {
  6.         background: #ccc url("img/ico/viem_c.png") no-repeat center center;
  7. }


CODE (javascript):
скопировать код в буфер обмена
  1. // Переключаем состояния
  2. $('div').click(function(){
  3.         var _this = $(this);
  4.  
  5.         if (_this.hasClass('gray')) {
  6.                 _this.toggleClass('gray');
  7.         } else {
  8.                 _this.toggleClass('ligh-gray');
  9.         }
  10. });
  11.  
  12. // Отмечаем все
  13. $('toggle-all').click(function(e){
  14.         e.preventDefault();
  15.  
  16.         $('.cicle-container div').removeClass('ligh-gray').addClass('gray');
  17. });


CODE (html):
скопировать код в буфер обмена
  1. <div class="cicle-container">
  2.         <div class="ligh-gray"></div>
  3.         <div class="ligh-gray"></div>
  4.         <div class="gray"></div>
  5.         <div class="ligh-gray"></div>
  6.         <div class="ligh-gray"></div>
  7.         <div class="ligh-gray"></div>
  8. </div>


Код примерный дабы вы поняли как реализовать.


-----
Список фильмов с описанием, блекджеком и... для Joomla? -> https://киноархив[dot]com
Демо нового движка для сайта php.su -> php[dot]su, проект на гитхабе
 
 Top
Deonis
Отправлено: 21 Июля, 2015 - 17:34:19
Post Id



Посетитель


Покинул форум
Сообщений всего: 298
Дата рег-ции: Нояб. 2009  


Помог: 14 раз(а)
Во-первых, нет смысла для такой задачи использовать изображения. Во-вторых, не ясно, что должно происходить при повторном нажатии на кнопку. В-третьих, месяц назад уже утвердили ES6, а вы события устанавливаете по старинке. В-четвертых, Viper и Tyoma5891 вам показывали варианты с использованием jQuery, хотя и не понятно почему, если ваш код указывает на то, что вы используете ванилу.
В общем, пока покажу вам такой вариант, где повторный клик переключает состояние кружков. А если уточните вопрос, то подкорректируем:
CODE (html):
скопировать код в буфер обмена
  1. <span class="circle"></span>
  2. <span class="circle"></span>
  3. <span class="circle"></span>
  4. <button id="toggle">Toggle</button>

CODE (css):
скопировать код в буфер обмена
  1. .circle {
  2.     display: inline-block;
  3.     width: 100px;
  4.     height: 100px;
  5.     background: #999;
  6.     border-radius: 50%;
  7. }
  8. .active {
  9.     background: #333;
  10. }

CODE (javascript):
скопировать код в буфер обмена
  1.  
  2. var d = document;
  3. d.addEventListener('DOMContentLoaded', function () {
  4.      var but = d.getElementById('toggle'),
  5.          cirles = d.querySelectorAll('.circle');
  6.      but.addEventListener('click', function () {
  7.          [].forEach.call(cirles, function (el) {
  8.              el.classList.toggle('active');
  9.          });
  10.      }, false);
  11.  }, false);


P.S. На всякий случай, вот пример и с кликом на сами кружки.
CODE (javascript):
скопировать код в буфер обмена
  1. var d = document;
  2. d.addEventListener('DOMContentLoaded', function () {
  3.      var but = d.getElementById('toggle'),
  4.          cirles = [].slice.call(d.querySelectorAll('.circle'));
  5.      but.addEventListener('click', function () {
  6.          cirles.forEach(function (el) {
  7.              toggleCirсleClass.call(el);
  8.          });
  9.      }, false);
  10.      
  11.      cirles.forEach(function(el){
  12.          el.addEventListener('click', toggleCirсleClass);
  13.      });
  14.      
  15.      function toggleCirсleClass(){
  16.          this.classList.toggle('active');
  17.      }
  18.      
  19.  }, false);

(Отредактировано автором: 21 Июля, 2015 - 17:54:07)

 
 Top
Alex213
Отправлено: 21 Июля, 2015 - 20:50:55
Post Id


Новичок


Покинул форум
Сообщений всего: 47
Дата рег-ции: Июль 2015  


Помог: 0 раз(а)
Deonis пишет:
А если уточните вопрос, то подкорректируем:

Все круто )), единственное отдельно бы кнопку отменить выделение..., и еще при выделении отдельных элементов, если один выделяешь, потом нажимаешь на кнопку toogle , она выделяет те, которые не выделены, а выделенную убирает; надо чтоб выделяла все. ну и кнопка отменить выделение, чтоб отменяла как например два выделенных так и все выделенные
 
 Top
Deonis
Отправлено: 21 Июля, 2015 - 22:12:01
Post Id



Посетитель


Покинул форум
Сообщений всего: 298
Дата рег-ции: Нояб. 2009  


Помог: 14 раз(а)
Alex213 пишет:
отдельно бы кнопку отменить выделение
То есть, вы хотите две кнопки? Смотрим пример в песочнице
CODE (html):
скопировать код в буфер обмена
  1. <span class="circle"></span>
  2. <span class="circle"></span>
  3. <span class="circle"></span>
  4. <button data-action="add">Вкл.</button>
  5. <button data-action="remove">Выкл.</button>

CODE (javascript):
скопировать код в буфер обмена
  1. var d = document;
  2. d.addEventListener('DOMContentLoaded', function () {
  3.     var cirles = [].slice.call(d.querySelectorAll('.circle'));
  4.  
  5.     [].forEach.call(d.querySelectorAll('button'), function (but) {
  6.         but.addEventListener('click', function () {
  7.             var act = this.dataset.action;
  8.             cirles.forEach(function (el) {
  9.                 el.classList[act]('active');
  10.             });
  11.         }, false);
  12.     });
  13.    
  14.     cirles.forEach(function (el) {
  15.         el.addEventListener('click', toggleCirсleClass);
  16.     });
  17.  
  18.     function toggleCirсleClass() {
  19.         this.classList.toggle('active');
  20.     }
  21.  
  22. }, false);
Ахтунг! Обратите внимание на то, что свойство dataset не работает в осле ниже 11-ой версии. Если нужно учитывать и более старые версии, то измените:
CODE (javascript):
скопировать код в буфер обмена
  1. // эту строку
  2. var act = this.dataset.action;
  3. // на эту
  4. var act = this.getAttribute('data-action');

(Отредактировано автором: 21 Июля, 2015 - 22:12:48)

 
 Top
Alex213
Отправлено: 21 Июля, 2015 - 22:33:49
Post Id


Новичок


Покинул форум
Сообщений всего: 47
Дата рег-ции: Июль 2015  


Помог: 0 раз(а)
Во ))), все супер, спасибо большое)))
 
 Top
Поиск в теме | Версия для печати
Страниц (1): [1]
Сейчас эту тему просматривают: 0 (гостей: 0, зарегистрированных: 0)
« JavaScript & VBScript »


Все гости форума могут просматривать этот раздел.
Только зарегистрированные пользователи могут создавать новые темы в этом разделе.
Только зарегистрированные пользователи могут отвечать на сообщения в этом разделе.
  



Powered by PHP  Powered By MySQL  Powered by Nginx  Valid CSS  RSS

 
Powered by ExBB FM 1.0 RC1. InvisionExBB