Форум

DobrovolskyDen · #1 (**permalink**) 06.05.2018, 00:08

Сделал скрипт, который меняет по счелчку фон div'a. На другой фон переходит, но теперь нужно операцию сделать в обратную сторону.
Вот код js, но никак не могу понять, как вернуть кнопку, которую сделал с помощью checkbox, в исходное положение при этом, чтобы фон был изначальным, т.е., до нажатия на кнопку.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="light.css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/effect.js"></script>
</head>
<body>
<div id="wrapper">
<div class="red">
<input type="checkbox" name="switch" id="switch">
<label class="switch" for="switch"></label>
</div>
</div>

</body>
</HTML>

$(function() {
$('#wrapper > div').on('click', function() {
$('#wrapper').css('background', $(this).css('background'));
});
});

j0hnik · #2 (**permalink**) 06.05.2018, 00:18

нужно сохранить изначальное значение в переменную
а потом когда нужно переменить стиль из переменной.

var x = $('#wrapper').css('background');

DobrovolskyDen · #3 (**permalink**) 06.05.2018, 00:26

А вы можете конкретнее написать, а то я не очень понимаю, как это сделать(
Заранее спасибо!

j0hnik · #4 (**permalink**) 06.05.2018, 11:14

$(function() {
	var x = $('#wrapper').css('background');
	var y = $('#wrapper > div').css('background');
	$('#wrapper > div').on('click', function() {
		$('#wrapper').css('background') == x ? $('#wrapper').css('background', y) : $('#wrapper').css('background', x);
	});
});

DobrovolskyDen · #5 (**permalink**) 06.05.2018, 20:29

Не работает, не знаю почему(

j0hnik · #6 (**permalink**) 06.05.2018, 20:38

DobrovolskyDen,
сделайте тестовый пример, разберемся в чем причина.

DobrovolskyDen · #7 (**permalink**) 06.05.2018, 22:02

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="light.css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/effect.js"></script>
</head>
<body>
<div id="wrapper">

<div class="red">
<input type="checkbox" name="switch" id="switch">
<label class="switch" for="switch"></label>
</div>
</div>

</body>
</HTML>

вот мой html

css:
@font-face {
font-family: MrGrieves-Regular; /* Гарнитура шрифта */
src: url(fonts/MrGrieves-Regular.otf); /* Путь к файлу со шрифтом */
}
html {
height: 100%;
}

body {
height: 100%;
display: inline;
margin: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}

#wrapper {
height: 100%;
background: url(light.gif) no-repeat center bottom;
background-size: cover;

}
.switch {
display: block;
position: fixed;
width: 70px;
height: 100px;
margin-top: 170px;
margin-left: 900px;

border-radius: 70px;
background: #6A5928,
background: linear-gradient(#6A5928, #fdfdfd);
border: 1px solid rgba(0,0,0,0.1);

box-shadow:
0 12px 13px rgba(49,18,14,.6);

cursor: pointer;
visibility: visible;

}

.switch:before {
content: "";
position: absolute;
top: -10px; bottom: -10px;
left: -5px; right: -5px;
z-index: -1;

background: #6A5928,
border-radius: inherit;

box-shadow:
0 1px 1px rgba(#aea391,0.2),
0 3px 3px rgba(170, 160, 140, 0.4),

0 0 5px rgba(170, 160, 140, 0.5);
}

.switch:after {
content: "";
width: 60px;
height: 70px;
border-radius: 50%;
z-index: -1;
left: 18px;
top: 10px;
background: #6A5928;

-webkit-filter: blur(10px);
}
#switch {

clip: rect(0 0 0 0);
visibility: hidden;
}

#switch:checked ~ .switch {
box-shadow:

0 -6px 5px rgba(196,196,196,.2),
0px 0px 5px rgba(49,18,14,.6);
border: 5px;

}

#switch:checked ~ .switch:after {
display: none;
}

.red { background:url(light2.gif) no-repeat center bottom;
background-size: cover;
visibility:hidden;
}
#off {
font-family: MrGrieves-Regular;
font-size: 80px;
margin:0;
margin-left: 720px;
margin-top: 120px;
position: absolute;
text-shadow:

7px 6px 15px rgba(196,196,196,.4),
12px 10px 15px rgba(49,18,14,.6);

}
#off:before {
content: "";
position: absolute;
top: -10px; bottom: -10px;
left: -5px; right: -5px;
z-index: -1;

background: #6A5928,
border-radius: inherit;
}

#off1 {
margin:0;
text-shadow:

7px 6px 15px rgba(196,196,196,.4),
12px 10px 15px rgba(49,18,14,.6);

}

#switch:checked ~ #off:before {
font-family: MrGrieves-Regular;
font-size: 80px;
margin:0;
margin-left: 720px;
margin-top: 120px;
text-shadow:

}
}
js:
var intputs = document.getElementsByName('switch');
for(var i = 0, l = inputs.length; i < l; i++){
inputs[i].onclick = function(){ document.getElementById('#klass').innerHTML = ''; }
}
$(function() {
2
var x = $('#wrapper').css('background');
3
var y = $('#wrapper > div').css('background');
4
$('#wrapper > div').on('click', function() {
5
$('#wrapper').css('background') == x ? $('#wrapper').css('background', y) : $('#wrapper').css('background', x);
6
});
7
});

j0hnik · #8 (**permalink**) 06.05.2018, 22:17

у вас в цикле ошибка, в консоль посмотрите.

рони · #9 (**permalink**) 06.05.2018, 22:34

DobrovolskyDen,
Пожалуйста, отформатируйте свой код!

Для этого его можно заключить в специальные теги: js/css/html и т.п., например:

[js]
... ваш код...
[/js]

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.

DobrovolskyDen · #10 (**permalink**) 07.05.2018, 20:44

Да, я вижу, но я всё равно не пойму, что там не правильно. Мне весьма трудно дается js, но я реально не могу понять, что не так. Сейчас, в той строчке, где была ошибка я заменил l на length. Ошибка исчезла, но опять не работает. Подскажите, пожалуйста, что мне поменять в структуре или быть может вставить какой-то элемент. Очень Вас прошу, заранее спасибо!

Удалил, предыдущий скрипт код, вставил код, который вы написали =>
$(function() {
2
var x = $('#wrapper').css('background');
3
var y = $('#wrapper > div').css('background');
4
$('#wrapper > div').on('click', function() {
5
$('#wrapper').css('background') == x ? $('#wrapper').css('background', y) : $('#wrapper').css('background', x);
6
});
7
});
Но всё равно не работает(

Форум

Справочник

Discord чат

Курсы javascript