переключение атрибута checked с интервалом в 5 секунд

[smart-create]

Добрый день! Не могу разобраться с "перебрасыванием" атрибута 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. Долблюсь уже второй день, и нечего толкового не выходит

[Dilettante_Pro]

smart-create,

Долблюсь уже второй день, и нечего толкового не выходит

А где варианты попыток?

[ksa]

как это правильно реализовать на js

Как вариант...
- найти включенный
- выключить
- взять следующий за ним, если такого нет - первый из его братьев
- включить
- повторить, выше описанное, через 5 секунд

[smart-create]

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 дней пока с этим не справляюсь

[smart-create]

Как вариант...
- найти включенный
- выключить
- взять следующий за ним, если такого нет - первый из его братьев
- включить
- повторить, выше описанное, через 5 секунд

ksa,

Спасибо, Вы правда очень помогли)) за исключением того что написать "алгоритм" русским языком и русскими буквами я бы и без помощи осилил, с русской грамматикой в школе слава богу хорошо было. Но увы браузеры пока еще не научились воспринимать скрипты типа:

<скрипт>
$("эй_браузер").сделайМнеПожалуйста('что_бы_все_работало')
</скрипт>

[ksa]

увы браузеры пока еще не научились воспринимать скрипты типа

Я писал алгоритм для тебя, а не для браузера.
Потому как твой совсем неправильный.

[smart-create]

Я писал алгоритм для тебя, а не для браузера.
Потому как твой совсем неправильный.

ksa, Я понимаю что для меня, но если бы я мог записать написанное вами на js, я бы не тратил время и не просил помощи, у более опытных людей.

Мне казалось что в скрипте который я написал выше я этого алгоритма придерживаюсь, и думал что осталось только подлатать его синтаксически. То есть первая и вторая строчка моего скрипта соответствует 1-му пункту, в Вашем алгоритме, 5-я строчка скрипта, это 2-й пункт у Вас, 4-я строчка, это 3-й и 4-й пункт, а 3-я строчка, это 5-й пункт.
Я хочу объяснить что понимаю, что такое алгоритм и как он должен выглядеть, но отсутствие опыта в js, не дает мне возможности во платить это понимание в скрипт. По этому и обращаюсь сюда к вам, более опытным, что бы не сидеть неделю в гуле и не изобретать велосипед и js-монстров, а попросить вас, поделиться со мной своим опытом, и наглядно увидеть как сразу сделать красиво и правильно.

Если я прошу слишком много - так и скажите. Если, по каким либо причинам, Вы не хотите мне помочь - так и скажите. Если же, не каких подобных проблем нет, то помогите решить мой вопрос и я буду очень благодарен

[ksa]

Вы не хотите мне помочь - так и скажите.

Так я собственно уже помогаю...

Но тебе не помощь нужна, а готовое решение. За готовым у нас есть раздел "Работа".

[smart-create]

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') - это я добавляю для визуализации своих действий, то есть если следующему элементу добавились бы соответствующие стили, я бы знал что все заработало)
});

Что я делаю не так?(

[Rise]

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