Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 05.12.2016, 12:18
Профессор
Отправить личное сообщение для smart-create Посмотреть профиль Найти все сообщения от smart-create
 
Регистрация: 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.
Ответить с цитированием
  #2 (permalink)  
Старый 05.12.2016, 12:32
Профессор
Отправить личное сообщение для Dilettante_Pro Посмотреть профиль Найти все сообщения от Dilettante_Pro
 
Регистрация: 27.11.2015
Сообщений: 2,899

smart-create,
Сообщение от smart-create
Долблюсь уже второй день, и нечего толкового не выходит
А где варианты попыток?
Ответить с цитированием
  #3 (permalink)  
Старый 05.12.2016, 13:36
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 13,580

Сообщение от smart-create
как это правильно реализовать на js
Как вариант...
- найти включенный
- выключить
- взять следующий за ним, если такого нет - первый из его братьев
- включить
- повторить, выше описанное, через 5 секунд
Ответить с цитированием
  #4 (permalink)  
Старый 06.12.2016, 00:48
Профессор
Отправить личное сообщение для smart-create Посмотреть профиль Найти все сообщения от smart-create
 
Регистрация: 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 дней пока с этим не справляюсь
Ответить с цитированием
  #5 (permalink)  
Старый 06.12.2016, 00:54
Профессор
Отправить личное сообщение для smart-create Посмотреть профиль Найти все сообщения от smart-create
 
Регистрация: 25.10.2016
Сообщений: 157

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

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

<скрипт>
$("эй_браузер").сделайМнеПожалуйста('что_бы_все_работало')
</скрипт>
Ответить с цитированием
  #6 (permalink)  
Старый 06.12.2016, 08:09
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 13,580

Сообщение от smart-create
увы браузеры пока еще не научились воспринимать скрипты типа
Я писал алгоритм для тебя, а не для браузера.
Потому как твой совсем неправильный.
Ответить с цитированием
  #7 (permalink)  
Старый 06.12.2016, 13:13
Профессор
Отправить личное сообщение для smart-create Посмотреть профиль Найти все сообщения от smart-create
 
Регистрация: 25.10.2016
Сообщений: 157

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

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

Если я прошу слишком много - так и скажите. Если, по каким либо причинам, Вы не хотите мне помочь - так и скажите. Если же, не каких подобных проблем нет, то помогите решить мой вопрос и я буду очень благодарен
Ответить с цитированием
  #8 (permalink)  
Старый 06.12.2016, 13:30
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 13,580

Сообщение от smart-create
Вы не хотите мне помочь - так и скажите.
Так я собственно уже помогаю...

Но тебе не помощь нужна, а готовое решение. За готовым у нас есть раздел "Работа".
Ответить с цитированием
  #9 (permalink)  
Старый 06.12.2016, 15:07
Профессор
Отправить личное сообщение для smart-create Посмотреть профиль Найти все сообщения от smart-create
 
Регистрация: 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') - это я добавляю для визуализации своих действий, то есть если следующему элементу добавились бы соответствующие стили, я бы знал что все заработало)
});


Что я делаю не так?(
Ответить с цитированием
  #10 (permalink)  
Старый 06.12.2016, 15:49
Профессор
Отправить личное сообщение для Rise Посмотреть профиль Найти все сообщения от Rise
 
Регистрация: 07.11.2013
Сообщений: 4,644

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">
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как получить значение атрибута checked imedia Элементы интерфейса 1 06.05.2016 17:14
переключение стилей интервалом 5 секунд progns Общие вопросы Javascript 3 25.10.2011 15:47