переключение атрибута 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. Долблюсь уже второй день, и нечего толкового не выходит :help: |
smart-create,
Цитата:
|
Цитата:
- найти включенный - выключить - взять следующий за ним, если такого нет - первый из его братьев - включить - повторить, выше описанное, через 5 секунд |
Цитата:
$('.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 дней пока с этим не справляюсь |
Цитата:
Спасибо, Вы правда очень помогли)) за исключением того что написать "алгоритм" русским языком и русскими буквами я бы и без помощи осилил, с русской грамматикой в школе слава богу хорошо было. Но увы браузеры пока еще не научились воспринимать скрипты типа:
<скрипт>
$("эй_браузер").сделайМнеПожалуйста('что_бы_все_работало')
</скрипт>
|
Цитата:
Потому как твой совсем неправильный. |
Цитата:
Мне казалось что в скрипте который я написал выше я этого алгоритма придерживаюсь, и думал что осталось только подлатать его синтаксически. То есть первая и вторая строчка моего скрипта соответствует 1-му пункту, в Вашем алгоритме, 5-я строчка скрипта, это 2-й пункт у Вас, 4-я строчка, это 3-й и 4-й пункт, а 3-я строчка, это 5-й пункт. Я хочу объяснить что понимаю, что такое алгоритм и как он должен выглядеть, но отсутствие опыта в js, не дает мне возможности во платить это понимание в скрипт. По этому и обращаюсь сюда к вам, более опытным, что бы не сидеть неделю в гуле и не изобретать велосипед и js-монстров, а попросить вас, поделиться со мной своим опытом, и наглядно увидеть как сразу сделать красиво и правильно. Если я прошу слишком много - так и скажите. Если, по каким либо причинам, Вы не хотите мне помочь - так и скажите. Если же, не каких подобных проблем нет, то помогите решить мой вопрос и я буду очень благодарен |
Цитата:
Но тебе не помощь нужна, а готовое решение. За готовым у нас есть раздел "Работа". |
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') - это я добавляю для визуализации своих действий, то есть если следующему элементу добавились бы соответствующие стили, я бы знал что все заработало)
});
Что я делаю не так?( |
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"> |
Rise, Спасибо большое, Вы очень помогли! Можно Вас еще попросить помочь расшифровать написанный Вами скрипт. Как я уже написал выше, хотелось бы не скопипастить набор символов и забыть, а разобраться как это работает
|
Rise, Намек понятен, спасибо)
Последний вопрос, пока я еще не изучил всю документацию ссылку на которую Вы прислали, я не могу толком прочитать Ваш скрипт из-за этого не могу понять как можно остановить его выполнение если один из импутов находится в фокусе. То есть благодаря скрипту на странице происходит некая анимация с элементами формы, а если один из них выбран (.focus() или просто .click()) то нужно что бы эта анимация остановилась |
Rise, Доброй ночи. Хотел бы еще немного Вас побеспокоить, не могу я все не как разобраться с Вашим последним сообщением. 5-й день уже пошел, а я все не как понять не могу.
Самое первое конечно о чем стоит сказать - я понял что определение фокуса это не то что мне нужно, потому как переключение импутов создают, как я уже писал выше, некую "анимацию", и для пользователя будет удобно когда при наведении на область с импутами, эта "анимация" остановиться. По этому я прибег к .hover() Делаю следующие:
$('#gal').hover( //родитель в котором находятся инпуты
function() {
// здесь нужно остановить "анимацию", по скольку эффект анимации происходит благодаря переключению атрибута "checked" с одного импута на другой, то нужно остановить само это переключение, то есть по факту остановить выполнение скрипта который вы написали выше
}
)
Весь скрипт выглядит следующим образом:
$(document).ready (function slideActive() {
var that = $({
input: $('[name=btn]'),
index: 0
})
.delay(1000)
.queue(function check(next) {
that.delay(3000)
.queue(check);
this.input
.eq(this.index < this.input.length ? this.index++ : this.index = 0)
.prop('checked', true);
next();
$('#gal').hover(
function() {
$('[name=btn]').stop(); // здесь пытаюсь следовать вашей рекомендации, использую метод "стоп" и натравливаю его на тот объект в котором происходит переключение атрибута "checked"
}
)
});
})
Но в результате нечего не происходит, я предполагаю что вы не совсем верно меня поняли и .stop() это не совсем то что нужно, поскольку во всякой документации которую я причитал за эти дни .stop() применяется для остановки, скажем так, "традиционной" анимации которая создается средствами js и/или css и навешивается на какой-то блок. В моем же случае все несколько иначе. не какой js и/или css анимации нет, есть перекидывание атрибута "checked" с одного импута на другой за определенный интервал времени - это и создает эффект который я назвал анимацией в своем случае. То есть в итоге, на сколько я понимаю мне нужно, при наведении на родителя остановить выполнение скрипта с которым Вы в в прошлый раз мне так любезно помогли. Прошу подсказать, в правильную ли сторону развиваются мои мысли и если да то каким образом можно осуществить то что я задумал. Заранее благодарен |
smart-create,
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
var gal = $(".galnav"),
inp = $('[type="radio"]', gal),
loop = true,
pause = 3000,
timer,
len = inp.length,
indx = len-1;
function go() {
indx = ++indx % len;
inp.eq(indx).prop({checked:true});
loop && (timer = window.setTimeout(go,pause))
}
go();
gal.on("mouseenter", function() {
loop = false;
window.clearTimeout(timer)
}).on("mouseleave", function() {
window.clearTimeout(timer);
loop = true;
go()
})
});
</script>
</head>
<body> <p></p>
<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>
</body>
</html>
|
| Часовой пояс GMT +3, время: 11:27. |