05.12.2016, 12:18
|
Профессор
|
|
Регистрация: 25.10.2016
Сообщений: 157
|
|
переключение атрибута checked с интервалом в 5 секунд
Добрый день! Не могу разобраться с "перебрасыванием" атрибута checked с одного импута на другой при помощи js.
Есть вот такая разметка:
<nav class="galnav">
<ul>
<li>
<input type="radio" name="btn" value="one" checked="checked">
<label for="btn"></label>
</li>
<li>
<input type="radio" name="btn" value="two">
<label for="btn"></label>
</li>
<li>
<input type="radio" name="btn" value="fre">
<label for="btn"></label>
</li>
</ul>
</nav>
Здесь все импуты скрыты и по умолчанию виден только тот у которого стоит атрибут checked со значение checked, то есть checked="checked". Мне необходимо с помощью js реализовать переключением этих импутов с интервалом в 5 секунд, то есть каждый 5 секунд атрибут checked="checked" должен удаляться с текущего импута и добавляться к следующему, когда дело дойдет до последнего импута, цикл должен запускаться по кругу.
Подскажите пожалуйста как это правильно реализовать на js. Долблюсь уже второй день, и нечего толкового не выходит
Последний раз редактировалось smart-create, 06.12.2016 в 00:40.
|
|
05.12.2016, 12:32
|
Профессор
|
|
Регистрация: 27.11.2015
Сообщений: 2,899
|
|
smart-create,
Сообщение от smart-create
|
Долблюсь уже второй день, и нечего толкового не выходит
|
А где варианты попыток?
|
|
05.12.2016, 13:36
|
|
CacheVar
|
|
Регистрация: 19.08.2010
Сообщений: 14,205
|
|
Сообщение от smart-create
|
как это правильно реализовать на js
|
Как вариант...
- найти включенный
- выключить
- взять следующий за ним, если такого нет - первый из его братьев
- включить
- повторить, выше описанное, через 5 секунд
|
|
06.12.2016, 00:48
|
Профессор
|
|
Регистрация: 25.10.2016
Сообщений: 157
|
|
Сообщение от Dilettante_Pro
|
smart-create,
А где варианты попыток?
|
$('.galnav').each(function(){ // перебираем весь контейнер в котором содержаться импуты
active = $(this).attr("checked"); // находим активный импут, то есть импут у которого установлен атрибут "checked"
setTimeout(function () {
$(this).after(active); // через 5 секунд устанавливаем атрибут "checked" на следующий импут
$(this).removeAttr(active); // через 5 секунд убираем атрибут "checked" у предыдущего импута
}, 5000);
});
Dilettante_Pro, Вот один из вариантов моих попыток, он не работает, я понимаю что и не должен, потому как я только начал изучать синтаксис js и jq, и попросту не знаю как это записать правильно. Как мне кажется логика которой я иду в этом скрипте верна, просто прошу помочь мне это правильно записать. Один я как показа опыт последних 3 дней пока с этим не справляюсь
|
|
06.12.2016, 00:54
|
Профессор
|
|
Регистрация: 25.10.2016
Сообщений: 157
|
|
Сообщение от ksa
|
Как вариант...
- найти включенный
- выключить
- взять следующий за ним, если такого нет - первый из его братьев
- включить
- повторить, выше описанное, через 5 секунд
|
ksa,
Спасибо, Вы правда очень помогли)) за исключением того что написать "алгоритм" русским языком и русскими буквами я бы и без помощи осилил, с русской грамматикой в школе слава богу хорошо было. Но увы браузеры пока еще не научились воспринимать скрипты типа:
<скрипт>
$("эй_браузер").сделайМнеПожалуйста('что_бы_все_работало')
</скрипт>
|
|
06.12.2016, 08:09
|
|
CacheVar
|
|
Регистрация: 19.08.2010
Сообщений: 14,205
|
|
Сообщение от smart-create
|
увы браузеры пока еще не научились воспринимать скрипты типа
|
Я писал алгоритм для тебя, а не для браузера.
Потому как твой совсем неправильный.
|
|
06.12.2016, 13:13
|
Профессор
|
|
Регистрация: 25.10.2016
Сообщений: 157
|
|
Сообщение от ksa
|
Я писал алгоритм для тебя, а не для браузера.
Потому как твой совсем неправильный.
|
ksa, Я понимаю что для меня, но если бы я мог записать написанное вами на js, я бы не тратил время и не просил помощи, у более опытных людей.
Мне казалось что в скрипте который я написал выше я этого алгоритма придерживаюсь, и думал что осталось только подлатать его синтаксически. То есть первая и вторая строчка моего скрипта соответствует 1-му пункту, в Вашем алгоритме, 5-я строчка скрипта, это 2-й пункт у Вас, 4-я строчка, это 3-й и 4-й пункт, а 3-я строчка, это 5-й пункт.
Я хочу объяснить что понимаю, что такое алгоритм и как он должен выглядеть, но отсутствие опыта в js, не дает мне возможности во платить это понимание в скрипт. По этому и обращаюсь сюда к вам, более опытным, что бы не сидеть неделю в гуле и не изобретать велосипед и js-монстров, а попросить вас, поделиться со мной своим опытом, и наглядно увидеть как сразу сделать красиво и правильно.
Если я прошу слишком много - так и скажите. Если, по каким либо причинам, Вы не хотите мне помочь - так и скажите. Если же, не каких подобных проблем нет, то помогите решить мой вопрос и я буду очень благодарен
|
|
06.12.2016, 13:30
|
|
CacheVar
|
|
Регистрация: 19.08.2010
Сообщений: 14,205
|
|
Сообщение от smart-create
|
Вы не хотите мне помочь - так и скажите.
|
Так я собственно уже помогаю...
Но тебе не помощь нужна, а готовое решение. За готовым у нас есть раздел "Работа".
|
|
06.12.2016, 15:07
|
Профессор
|
|
Регистрация: 25.10.2016
Сообщений: 157
|
|
ksa, дело как раз в том что я хочу сам научиться. Если бы я это делал в каких либо коммерческих или рабочих целях и не знал как сделать, то мне проще было бы конечно заплатить (тем более за такую мелочь цена была бы не велика) кому-то а не сидеть уже 4-й день)))
Если я еще могу наедятся на вашу помощь, посмотрите пожалуйста что я имею сейчас, вот разметка: (я её не много дополнил добавил каждому инпуту класс, что бы было проще его искать)
<nav class="galnav">
<ul>
<li>
<input type="radio" name="btn" value="one" checked="checked" class="sheare-input">
<label for="btn"></label>
</li>
<li>
<input type="radio" name="btn" value="two" class="sheare-input">
<label for="btn"></label>
</li>
<li>
<input type="radio" name="btn" value="fre" class="sheare-input">
<label for="btn"></label>
</li>
</ul>
</nav>
Вот скрипт, начал писать все заново, пытаюсь построчно воспроизвести алгоритм который Вы расписали, но натянулся на первую сложность:
jQuery(function($) {
var input = $('.sheare-input');
var active = input.filter('[checked]'); // здесь нахожу активный инпут
var next = active.nextAll('.sheare-input').css('border', '3px solid red'); // здесь пытаюсь найти следующий, НО что-то идет не так, скрипт не может определить следующий элемент с классом .sheare-input (.css('border', '3px solid red') - это я добавляю для визуализации своих действий, то есть если следующему элементу добавились бы соответствующие стили, я бы знал что все заработало)
});
Что я делаю не так?(
|
|
06.12.2016, 15:49
|
Профессор
|
|
Регистрация: 07.11.2013
Сообщений: 4,672
|
|
smart-create, jquery style:
var that = $({
input: $('[name=btn]'),
index: 0
})
.delay(1000)
.queue(function check(next) {
that.delay(5000)
.queue(check);
this.input
.eq(this.index < this.input.length ? this.index++ : this.index = 0)
.prop('checked', true);
next();
});
PS: <label for="id">
|
|
|
|