Показать сообщение отдельно
  #15 (permalink)  
Старый 31.07.2018, 16:04
Аватар для Белый шум
Профессор
Отправить личное сообщение для Белый шум Посмотреть профиль Найти все сообщения от Белый шум
 
Регистрация: 19.01.2012
Сообщений: 457

<ul>
    <li class="slonik">1</li>
    <li class="begemotik">2</li>
    <li class="begemotik">3</li>
    <li class="begemotik">4</li>
    <li class="slonik">5</li>
    <li class="slonik">6</li>
    <li class="slonik">7</li>
    <li class="begemotik">8</li>
    <li class="begemotik">9</li>
</ul>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$('ul').on('click', 'li', function(){
  $this = $(this);
  var cls = $this.attr('class');
  if($this.data('select')=='yes'){
    $this.css('color','').data('select', '');
    $this.nextUntil(':not(.'+cls+')').css('color','').each(function(){$(this).data('select', '');});
    $this.prevUntil(':not(.'+cls+')').css('color','').each(function(){$(this).data('select', '');});
  } else {
    $this.data('select', 'yes');
    $this.nextUntil(':not(.'+cls+')').css('color','red').each(function(){$(this).data('select', 'yes');});
    $this.prevUntil(':not(.'+cls+')').css('color','red').each(function(){$(this).data('select', 'yes');});
  }
});
</script>

Первое нажатие выделяет, второе - снимает выделение.

Последний раз редактировалось Белый шум, 31.07.2018 в 16:09. Причина: А, уже есть такое решение. Не посмотрел ))
Ответить с цитированием