Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Выбор конкретных дней вместо диапазона (https://javascript.ru/forum/misc/75043-vybor-konkretnykh-dnejj-vmesto-diapazona.html)

max1985 28.08.2018 10:10
Выбор конкретных дней вместо диапазона
 
Здравствуйте!
Есть скрипт который позволяет выбрать диапазон дней для расчета программы питания
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;
    }
});


<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>

Как его переделать чтоб можно было выбирать только конкретные дни?
Спасибо!

рони 28.08.2018 10:19
max1985,
результат какой должен быть?

рони 28.08.2018 10:38
Цитата:
Сообщение от рони
результат какой должен быть?
... тихо сам с собою ... предположим, что результат, это массив индексов 

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <style type="text/css">
   .active{
       background-color: rgba(255, 0, 0, 1);
       color: rgba(255, 255, 255, 1);
   }

  </style>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

</head>

<body>
<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 class="out"></div>
<script>
$(function() {
var dayActive = [], parent = $('.builder-days-selector'), out = $('.out');
parent.on('click', 'a',function(event) {
    event.preventDefault();
    $(this).toggleClass('active');
    var active = parent.find('.active');
    dayActive = $.map(active, function(el) {
   return  $(el).data('slide-index')
})
    out.text(dayActive)
});
parent.find('a:first').trigger('click').trigger('click');
});
</script>
</body>

</html>

max1985 28.08.2018 11:27
Спасибо большое за помощь!
Визуально отображается как надо, но расчет не ведется.

j0hnik 28.08.2018 11:34
max1985,
Расчетом какой скрипт занимается?

max1985 28.08.2018 11:46
Видимо то что в самом вверху
т.к если поменять в скрипте и коде:
builder-days-selector на builder-days-selector1
и
data-slide-index на data-slide-index1
то все продолжает работать...

рони 28.08.2018 13:25
max1985,
ждите телепатов

max1985 28.08.2018 14:01
Готов заплатить за доработку...
Необходимо чтоб получилось так 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;
    }
});

рони 28.08.2018 14:18
max1985,
дело не в том что вы показали, а в
Цитата:
Сообщение от j0hnik
Расчетом какой скрипт занимается?
скрипт который делает расчёт, на основании чего изменит алгоритм вычислений с диапазона на массив


Часовой пояс GMT +3, время: 13:38.