Задать вопрос
Профиль пользователя заблокирован сроком «навсегда» без указания причины
Ответы пользователя по тегу JavaScript
  • Как выбрать диапазон блоков?

    @Sulin Автор вопроса
    В общем плагина я так и не нашел. набросал сам код на коленке. выглядит он конечно страшновато, да и я не особо в jquery то разбираюсь, поэтому если кто-то поучаствует в его облагораживании буду благодарен.

    рабочий пример можно глянуть тут (пример в живую) Ссылка временная и пример там будет находит не долго.

    сам код такой (по сути всё что он делает это даёт и убирает класс active нужным элементам, делает кучу проверок в if else и делает по сути однотипные записи в переменные ну и пишет в отдельный блок выбранный диапазон)
    js:
    var minIndex, maxIndex, minContent, maxContent;
    $('.block_range .line').click(function(){
    	var globParent = $(this).parents('.modal_cont');
    	var parent = $(this).parents('.block_range');
    
    	if(!$(this).hasClass('active')){
    		if(parent.find('.line.active').size() == false){
    			minIndex = $(this).index();
    			minContent = $(this).attr('data-content');
    			globParent.find('.from').text(minContent);
    		}else if(parent.find('.line.active').size() == 1){
    			if($(this).index() < minIndex){
    				maxIndex = minIndex;
    				minIndex = $(this).index();
    
    				maxContent = minContent;
    				minContent = $(this).attr('data-content');
    				globParent.find('.from').text(minContent);
    				globParent.find('.to').text(maxContent);
    				parent.find('.line').slice(minIndex,maxIndex).addClass('active');
    			}else{
    				maxIndex = $(this).index();
    				maxContent = $(this).attr('data-content');
    				globParent.find('.to').text(maxContent);
    				parent.find('.line').slice(minIndex,maxIndex).addClass('active');
    			}
    		}else if(parent.find('.line.active').size() > 1){
    			if($(this).index() > maxIndex){
    				maxIndex = $(this).index();
    				maxContent = $(this).attr('data-content');
    				globParent.find('.to').text(maxContent);
    				parent.find('.line').slice(minIndex,maxIndex).addClass('active');
    			}else if($(this).index() < minIndex){
    				minIndex = $(this).index();
    				minContent = $(this).attr('data-content');
    				globParent.find('.from').text(minContent);
    				parent.find('.line').slice(minIndex,maxIndex).addClass('active');
    			}
    		}
    
    		$(this).addClass('active');
    	}else{
    		if($(this).index() < maxIndex && $(this).index() > minIndex){
    			var minMinus = $(this).index()-minIndex;
    			var maxMinus = maxIndex-$(this).index();
    
    			if(minMinus < maxMinus){
    				parent.find('.line').slice(minIndex,$(this).index()).removeClass('active');
    				minIndex = $(this).index();
    				minContent = $(this).attr('data-content');
    				globParent.find('.from').text(minContent);
    			}else{
    				parent.find('.line').slice($(this).index()+1,maxIndex+1).removeClass('active');
    				maxIndex = $(this).index();
    				maxContent = $(this).attr('data-content');
    				globParent.find('.to').text(maxContent);
    			}
    		}
    	}
    });


    пример html
    <div class="block_range">
    	<div class="line" data-content="50">50</div>
    	<div class="line" data-content="100">100</div>
    	<div class="line" data-content="150">150</div>
    	<div class="line" data-content="200">200</div>
    	<div class="line" data-content="250">250</div>
    	<div class="line" data-content="300">300</div>
    	<div class="line" data-content="более">Более</div>
    </div>
    Ответ написан
    Комментировать