Показать сообщение отдельно
  #8 (permalink)  
Старый 28.08.2018, 14:01
Интересующийся
Отправить личное сообщение для max1985 Посмотреть профиль Найти все сообщения от max1985
 
Регистрация: 03.07.2018
Сообщений: 25

Готов заплатить за доработку...
Необходимо чтоб получилось так https://prnt.sc/knrqo2
1. При нажатии на радиокнопку становятся активными элементы на против нее, а в противоположном блоке выбрать ничего нельзя и на всех элементах снимается active, пока не переключить радиокнопку.
2. Первый вариант выбирает диапозон, второй конкретные дни.
3. Должно работать на основании имеющегося скрипта.
Сейчас у меня так:
<div class="row">
<form>
    <div class="col-md-12 text-center builder-days-title">
        <i class="fa fa-arrow-down"></i>
        <span> Выбор диапазон расчета программы питания </span>
        <i class="fa fa-arrow-down"></i>
    </div>
	<input type="radio" name="gender" id="Choice1" value="Choice1" checked>
    <div class="col-md-12">
        <div class="custom-pager builder-days-selector">
            <a class="active" data-slide-index="0"> <!--                class = "active"-->
                <span class="pager-title">
                    Пн
                </span>
                <span class="circle">
                    <span class="inner-circle"></span>
                </span>
            </a>

            <a class="active" data-slide-index="1">
                <span class="pager-title">
                    Вт
                </span>
                <span class="circle">
                    <span class="inner-circle"></span>
                </span>
            </a>

            <a class="active" data-slide-index="2">
                <span class="pager-title">
                    Ср
                </span>
                <span class="circle">
                    <span class="inner-circle"></span>
                </span>
            </a>

            <a class="active" data-slide-index="3">
                <span class="pager-title">
                    Чт
                </span>
                <span class="circle">
                    <span class="inner-circle"></span>
                </span>
            </a>

            <a class="active" data-slide-index="4">
                <span class="pager-title">
                    Пт
                </span>
                <span class="circle">
                    <span class="inner-circle"></span>
                </span>
            </a>

            <a class="active" data-slide-index="5">
                <span class="pager-title">
                    Сб
                </span>
                <span class="circle">
                    <span class="inner-circle"></span>
                </span>
            </a>

            <a class="active" data-slide-index="6">
                <span class="pager-title">
                    Вс
                </span>
                <span class="circle">
                    <span class="inner-circle"></span>
                </span>
            </a>
        </div>
    </div>
	<br /><br />
	<div class="col-md-12 text-center builder-days-title">
        <i class="fa fa-arrow-down"></i>
        <span> Выбор конкретных дней для расчета программы питания </span>
        <i class="fa fa-arrow-down"></i>
    </div>
	<input type="radio" name="gender" id="Choice2" value="Choice2">
    <div class="col-md-12">
        <div class="custom-pager builder-days-selector1">
            <a data-slide-index1="0">
                <span class="pager-title">
                    Пн
                </span>
                <span class="circle">
                    <span class="inner-circle"></span>
                </span>
            </a>

            <a data-slide-index1="1">
                <span class="pager-title">
                    Вт
                </span>
                <span class="circle">
                    <span class="inner-circle"></span>
                </span>
            </a>

            <a data-slide-index1="2">
                <span class="pager-title">
                    Ср
                </span>
                <span class="circle">
                    <span class="inner-circle"></span>
                </span>
            </a>

            <a data-slide-index1="3">
                <span class="pager-title">
                    Чт
                </span>
                <span class="circle">
                    <span class="inner-circle"></span>
                </span>
            </a>

            <a data-slide-index1="4">
                <span class="pager-title">
                    Пт
                </span>
                <span class="circle">
                    <span class="inner-circle"></span>
                </span>
            </a>

            <a data-slide-index1="5">
                <span class="pager-title">
                    Сб
                </span>
                <span class="circle">
                    <span class="inner-circle"></span>
                </span>
            </a>

            <a data-slide-index1="6">
                <span class="pager-title">
                    Вс
                </span>
                <span class="circle">
                    <span class="inner-circle"></span>
                </span>
            </a>
        </div>
		
    </div>
</form>	
</div>

var firstDay = 0;
var lastDay = 6;
$('.builder-days-selector a').on('click', function(event) {
    var active = $('.builder-days-selector').find('.active').length;

    if (active === 0) {
        $(event.target.closest('a')).addClass('active');
        firstDay = $(event.target.closest('a')).attr('data-slide-index');
    } else if (active === 1) {
        lastDay = firstDay;
        $(event.target.closest('a')).attr('data-slide-index') > firstDay
            ? lastDay = $(event.target.closest('a')).attr('data-slide-index')
            : firstDay = $(event.target.closest('a')).attr('data-slide-index');

        for (var i = firstDay; i <= lastDay; i++) {
            $("a[data-slide-index=" + i + "]").addClass('active');
        }
    } else {
        $('.builder-days-selector a').removeClass('active');
        $(event.target.closest('a')).addClass('active');
        firstDay = $(event.target.closest('a')).attr('data-slide-index');
        lastDay = firstDay;
    }
});

var firstDay = 0;
var lastDay = 6;
$('.builder-days-selector1 a').on('click', function(event) {
    var active = $('.builder-days-selector1').find('.active').length;

    if (active === 0) {
        $(event.target.closest('a')).addClass('active');
        firstDay = $(event.target.closest('a')).attr('data-slide-index1');
    } else if (active === 1) {
        lastDay = firstDay;
        $(event.target.closest('a')).attr('data-slide-index1') > firstDay
            ? lastDay = $(event.target.closest('a')).attr('data-slide-index1')
            : firstDay = $(event.target.closest('a')).attr('data-slide-index1');

        for (var i = firstDay; i <= lastDay; i++) {
            $("a[data-slide-index1=" + i + "]").addClass('active');
        }
    } else {
        $('.builder-days-selector1 a').removeClass('active');
        $(event.target.closest('a')).addClass('active');
        firstDay = $(event.target.closest('a')).attr('data-slide-index1');
        lastDay = firstDay;
    }
});
Ответить с цитированием