Вход

Просмотр полной версии : Активация элементов DOM из состояния "display: none"


drakulawz
22.08.2018, 20:11
Всем доброго времени суток.
Есть вот такая функция:
$('#btnChFrame').click(changeFrame);

function changeFrame() {
var randomFrame = getRandom(6);
$('#img').attr('src', 'images/frames/' + randomFrame + '.png');
}

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

Меня хватило только на этот рандомный вывод.

Сейчас подумал, что можно сделать в CSS "display: none" для тех шести картинок и разблокировать их по очереди той же функцией "click". Вопрос в том, как это правильно сделать.
Буду благодарен за любой совет.

P.S.: Может быть есть вариант по-проще или без добавления всех картинок в DOM?

j0hnik
22.08.2018, 20:23
$('#btnChFrame').click(changeFrame);
var i = 0;
function changeFrame() {
$('#img').attr('src', 'images/frames/' + i + '.png');
i = ++i<=6?i:0;
}

так?

рони
22.08.2018, 20:24
drakulawz,
$('#btnChFrame').click(changeFrame);
var randomFrame = 0;
function changeFrame() {
randomFrame = ++randomFrame % 6;
$('#img').attr('src', 'images/frames/' + randomFrame + '.png');
}

drakulawz
22.08.2018, 20:41
j0hnik
Работает, только ставлю 5 вместо 6 так как откуда-то появляется седьмая (несуществующая) картинка. А если ставлю вместо ++i i++ то вообще 8 картинок делает, можете объяснить почему так?

рони
Ваш код работает отлично. Вот только если я первую функцию, хоть немного, понимаю, то вашу совсем нет. Можете объяснить, что к чему? А именно, разве "%" не выводит целое дробного числа?

З.Ы.: А я вообще в такие дебри (опять) лез:
var frames = $('#img');
function changeFrame(frames) {
var index = 0;
if (index < frames.length) {
index++;
} else if (index == frames.length) {
index = 0;
} else {}
return (frames[index]);
}

j0hnik
22.08.2018, 20:48
drakulawz,
i = ++i<6?i:0;

равно в таком случае стареть надо было

рони
22.08.2018, 20:49
drakulawz,
<script>
var randomFrame = 0;
for (var i = 0; i < 50; i++) {
randomFrame = ++randomFrame % 6;
document.write(randomFrame+"<br>")
}
</script>

drakulawz
22.08.2018, 20:53
рони,
Это уже лишнее, мне цикл не нужен. Есть кнопка на клик по которой должна меняться рамка. Первый вариант отлично подошёл...

drakulawz
22.08.2018, 20:54
Всем спасибо за помощь!

рони
22.08.2018, 20:58
Это уже лишнее, мне цикл не нужен.
это была демонстрация того, что делает код ++ %
Можете объяснить, что к чему? А именно, разве "%" не выводит целое дробного числа?