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
Форумы портала PHP.SU :: Версия для печати :: Как выделить все?
Форумы портала PHP.SU » Клиентская разработка » JavaScript & VBScript » Как выделить все?

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

1. Alex213 - 21 Июля, 2015 - 09:31:19 - перейти к сообщению
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. }

есть код, при нажатии на светлый кружок, он становится темным, как сделать чтоб при нажатии на кнопку выделить все все кружки становились темными?
2. DeepVarvar - 21 Июля, 2015 - 09:42:29 - перейти к сообщению
Alex213 пишет:
дожидаемся полной загрузки страницы
А еще гасим этой строчкой все остальные события, которые тоже дожидались загрузки, т.е. ничего кроме этого работать не будет.
Alex213 пишет:
производим какие-то действия
Это странные действия. Гораздо проще дать булевое св-во этому элементу, его и проверять, вместо innerHTML.
Alex213 пишет:
чтоб при нажатии на кнопку выделить все
Выбрать кнопку, выбрать все, по клику на кнопку обежать в цикле все, сделать что надо.
3. Alex213 - 21 Июля, 2015 - 09:53:10 - перейти к сообщению
Alex213 пишет:
производим какие-то действия
Это странные действия. Гораздо проще дать булевое св-во этому элементу, его и проверять, вместо innerHTML.
Alex213 пишет:
чтоб при нажатии на кнопку выделить все
Выбрать кнопку, выбрать все, по клику на кнопку обежать в цикле все, сделать что надо.[/quote]

А можете поподробнее написать или пример какой подсказать, я в этом на уровне чайника?
4. Tyoma5891 - 21 Июля, 2015 - 10:32:49 - перейти к сообщению
ну если больше никаких картинок нет, то можно сделать совсем просто:
CODE (javascript):
скопировать код в буфер обмена
  1. $( "#button" ).click(function() {
  2. $("img").prop("src", "img/ico/viem_c.png");
  3. });
5. Alex213 - 21 Июля, 2015 - 10:44:54 - перейти к сообщению
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>
6. Tyoma5891 - 21 Июля, 2015 - 10:50:30 - перейти к сообщению
а так
CODE (javascript):
скопировать код в буфер обмена
  1. $(document).ready(function() {
  2. $( "#button" ).click(function() {
  3. $("img").attr("src", "img/ico/viem_c.png");
  4. });
  5. });
  6.  
7. Alex213 - 21 Июля, 2015 - 11:08:08 - перейти к сообщению
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 прописать, тогда не обновляется, но проблема с тем, что все картинки, что есть поменялись на кружки осталась, и еще мне нужно, чтоб при нажатии второй раз кружок вновь становиллся светлым
8. Viper - 21 Июля, 2015 - 11:14:59 - перейти к сообщению
Alex213 упростите себе жизнь! Используйте CSS!
9. Alex213 - 21 Июля, 2015 - 11:26:34 - перейти к сообщению
Viper пишет:
Alex213 упростите себе жизнь! Используйте CSS!


Как именно?
10. Viper - 21 Июля, 2015 - 17:13:49 - перейти к сообщению
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>


Код примерный дабы вы поняли как реализовать.
11. Deonis - 21 Июля, 2015 - 17:34:19 - перейти к сообщению
Во-первых, нет смысла для такой задачи использовать изображения. Во-вторых, не ясно, что должно происходить при повторном нажатии на кнопку. В-третьих, месяц назад уже утвердили 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);
12. Alex213 - 21 Июля, 2015 - 20:50:55 - перейти к сообщению
Deonis пишет:
А если уточните вопрос, то подкорректируем:

Все круто )), единственное отдельно бы кнопку отменить выделение..., и еще при выделении отдельных элементов, если один выделяешь, потом нажимаешь на кнопку toogle , она выделяет те, которые не выделены, а выделенную убирает; надо чтоб выделяла все. ну и кнопка отменить выделение, чтоб отменяла как например два выделенных так и все выделенные
13. Deonis - 21 Июля, 2015 - 22:12:01 - перейти к сообщению
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');
14. Alex213 - 21 Июля, 2015 - 22:33:49 - перейти к сообщению
Во ))), все супер, спасибо большое)))

 

Powered by ExBB FM 1.0 RC1