Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 19.03.2018, 11:10
Профессор
Отправить личное сообщение для Янковиц Посмотреть профиль Найти все сообщения от Янковиц
 
Регистрация: 17.11.2014
Сообщений: 403

Сделать подсветку элементов
Есть ряд блоков:
<div class="parent">
<div class="show">1</div>
<div class="show">2</div>
<div class="show">3</div>
<div class="show">4</div>
</div>
<div class="parent">
<div class="show">5</div>
<div class="show">6</div>
<div class="show">7</div>
<div class="show">8</div>
</div>

При клике по элементу, закрашиваю синим цветом. Затем при перемещении курсора до или после кликнутного элемента, все остальные закрашивались красным до элемента над которым курсор. Короче, как в календарике: http://longbill.github.io/jquery-date-range-picker/
Прошу помощи знатоков

Последний раз редактировалось Янковиц, 19.03.2018 в 11:43.
Ответить с цитированием
  #2 (permalink)  
Старый 19.03.2018, 11:15
Профессор
Отправить личное сообщение для Янковиц Посмотреть профиль Найти все сообщения от Янковиц
 
Регистрация: 17.11.2014
Сообщений: 403

Нашел похожее:
http://jsfiddle.net/kkLgs1yv/2/
Только как реализовать с моей версткой?
Ответить с цитированием
  #3 (permalink)  
Старый 19.03.2018, 12:39
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Янковиц,
https://javascript.ru/forum/dom-wind...tml#post405718
Ответить с цитированием
  #4 (permalink)  
Старый 19.03.2018, 12:52
Профессор
Отправить личное сообщение для Янковиц Посмотреть профиль Найти все сообщения от Янковиц
 
Регистрация: 17.11.2014
Сообщений: 403

Спасибо!
Ответить с цитированием
  #5 (permalink)  
Старый 19.03.2018, 14:18
Профессор
Отправить личное сообщение для Янковиц Посмотреть профиль Найти все сообщения от Янковиц
 
Регистрация: 17.11.2014
Сообщений: 403

Рони, подскажи. Как на javascript обрабатывать динамически созданные элементы? В теме по ссылке такой код:
a.addEventListener("click", function() {
             if (void 0 === b) b = c, d("mark"), d("blue", b, b);
             else {
                 var a = Math.min(c, b),
                     e = Math.max(c, b);
                 b = void 0;
                 d("blue");
                 d("mark", a, e)
             }
         })

Как он будет выглядеть для динамически созданных элементов?
Ответить с цитированием
  #6 (permalink)  
Старый 19.03.2018, 14:35
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,650

Вешать обработчик после создания или вешать обработчик на элемент родителя, и проверять срабатывает ли событие на нужном элементе.
Ответить с цитированием
  #7 (permalink)  
Старый 19.03.2018, 15:47
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

выделение диапазона по двум кликам
Янковиц,

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style>
  body {
    display: flex;
    margin: 0;
    height: 100vh;
    background: #56bddc;
  }
  .box {
    display: flex;
    margin: auto;
    box-shadow: 0 0 5px hsla(0, 0%, 0%, .25);
  }
  .el {
    width: 60px;
    line-height: 60px;
    font-family: consolas;
    font-size: 30px;
    text-align: center;
    cursor: pointer;
    background: #fff;
    -webkit-user-select: none;
    user-select: none;
    -moz-user-select: none;
  }
  .el:hover { background: #fece9a; }
  .mark { background: #fece9a; }

  .blue, .blue:hover{
    background: #0000FF;
  }
  </style>

  <script>
window.addEventListener("DOMContentLoaded", function() {
  [].forEach.call(document.querySelectorAll(".box"), function(item) {
    var temp;
    item.addEventListener("click", function(event) {
      var el = item.querySelectorAll(".el");
      target = event.target;
      var index = [].indexOf.call(el, target);
      if (index !== -1) {
        [].forEach.call(el, function(el) {
          el.classList.remove("blue");
        });
        if (temp == index) {
          temp = void 0;
        } else {
          if (void 0 === temp) {
            target.classList.add("blue");
            temp = index;
          } else {
            var min = Math.min(index, temp), max = Math.max(index, temp);
            el = [].slice.call(el, min, ++max);
            [].forEach.call(el, function(el) {
              el.classList.add("blue");
            });
            temp = void 0;
          }
        }
      }
    });
    item.addEventListener("mouseover", function(event) {
      var el = item.querySelectorAll(".el");
      target = event.target;
      var index = [].indexOf.call(el, target);
      if (index !== -1) {
        if (void 0 !== temp) {
          [].forEach.call(el, function(el) {
            el.classList.remove("blue");
          });
          var min = Math.min(index, temp), max = Math.max(index, temp);
          el = [].slice.call(el, min, ++max);
          [].forEach.call(el, function(el) {
            el.classList.add("blue");
          });
        }
      }
    });
    item.addEventListener("mouseleave", function(event) {
      var el = item.querySelectorAll(".el");
      if (temp) {
        [].forEach.call(el, function(el) {
          el.classList.remove("blue");
        });
        el[temp].classList.add("blue");
        temp = void 0;
      }
    });
  });
});
  </script>
</head>

<body>
<div class='box'>
  <div class='el'>1</div>
  <div class='el'>2</div>
  <div class='el'>3</div>
  <div class='el'>4</div>
  <div class='el'>5</div>
  <div class='el'>6</div>
  <div class='el'>7</div>
  <div class='el'>8</div>
  <div class='el'>9</div>
  <div class='el'>X</div>
</div>


</body>

</html>
Ответить с цитированием
  #8 (permalink)  
Старый 19.03.2018, 17:59
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

Сообщение от Янковиц
Нашел похожее:
http://jsfiddle.net/kkLgs1yv/2/
Только как реализовать с моей версткой?
Можно так:

<style>
.show {
    cursor: pointer;
}

.mark {
    background-color: #00f;
}

.light {
    background-color: #ddd;
}
</style>
<div>
<div class="show">111111111</div>
<div class="show">222222222</div>
<div class="show">333333333</div>
<div class="show">444444444</div>
<div class="show">555555555</div>
<div class="show">666666666</div>
<div class="show">777777777</div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
$(function() {
    var el = $('div.show').click(function() {
       el.removeClass('light').not($(this).toggleClass('mark')).removeClass('mark');
    }).mouseenter(function() {
        var a = $(this), 
            b = a.index(), 
            c = a.siblings('.mark').index();
            
        el.removeClass('light');
        
        if(~c) (b < c ? el.slice(b, c) : el.slice(c+1, b+1)).addClass('light')  
        
    }).mouseleave(function() {
        el.removeClass('light')
    })
});
</script>

Последний раз редактировалось laimas, 19.03.2018 в 18:05.
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Выбор дочерних элементов Grendel Элементы интерфейса 3 25.08.2014 14:52
средства javascript позволяют сделать так retro88 Элементы интерфейса 2 25.05.2014 23:27
Вывод случайных элементов из массива в таблицу Narm0 Общие вопросы Javascript 10 06.08.2013 12:39
Удалить и вернуть массив из удаленных элементов splice Paulyyy Общие вопросы Javascript 15 29.05.2013 15:36
Исчезающие меню, как сделать стандартными методами? Astrey Общие вопросы Javascript 14 08.03.2013 20:28