Форум

Georgie0409 · #1 (**permalink**) 08.12.2019, 10:07

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

Я использую JS, так что если можно через него, то подскажите, буду рад. Заранее спасибо

рони · #2 (**permalink**) 08.12.2019, 10:08

Georgie0409,
ваши попытки где?
Пожалуйста, отформатируйте свой код!

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

[html run]
... минимальный код страницы с вашей проблемой
[/html]

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

Georgie0409 · #3 (**permalink**) 08.12.2019, 10:34

<div id = 'main_container'>
      <div id = 'container1>
      <div id = 'container2>
      <div id = 'container3>
      <div id = 'container4>
</div>

#main_container{
positon: absolute;
height: 8vmax;
width: 8vmax;
}
#container1{
positon: absolute;
height: 2vmax;
width: 2vmax;
background-color : rgba(192,192,192, 0.5);
}
#container2{
positon: absolute;
height: 2vmax;
width: 2vmax;
left: 2vmax;
background-color : rgba(192,192,192, 0.5);
}
#container3{
positon: absolute;
height: 2vmax;
width: 2vmax;
left: 2vmax;
background-color : rgba(192,192,192, 0.5);
}
#container4{
positon: absolute;
height: 2vmax;
width: 2vmax;
left: 2vmax;
background-color : rgba(192,192,192, 0.5);
}

jQuery(document).ready(function() {
$("#container1").click(function() {
        $("#container1").css({
            'background-color' : 'rgba(192,192,192, 0.25)',
        });
});

$("#container2").click(function() {
        $("#container2").css({
            'background-color' : 'rgba(192,192,192, 0.25)',
        });
});
$("#container3").click(function() {
        $("#container3").css({
            'background-color' : 'rgba(192,192,192, 0.25)',
        });
});
$("#container4").click(function() {
        $("#container4").css({
            'background-color' : 'rgba(192,192,192, 0.25)',
        });
});
});

Я могу при нажатии на container1 делать изменения в container2, container3, container4, но у меня в основном коде очень много блоков и я просто изуродую код)
Может можно как-то сделать по другому?

рони · #4 (**permalink**) 08.12.2019, 10:54

Georgie0409,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
<style type="text/css">

.main_container{
display: flex;
height: 8vmax;
width: 8vmax;
}
.main_container > .container{
height: 2vmax;
width: 2vmax;
border: 1px solid #0000CD;
}
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

  <script>
$(function() {
  var divs = $('.container');
  $('.main_container').on('click', '.container', function() {
  divs.css({'background-color' : ''});
  $(this).css({'background-color' : 'rgba(192,192,192, 0.25)'});
})
});
  </script>
</head>

<body>
<div class='main_container'>
      <div class='container'></div>
      <div class='container'></div>
      <div class='container'></div>
      <div class='container'></div>
</div>

</body>
</html>

Malleys · #5 (**permalink**) 08.12.2019, 13:21

Если без привлечения лишних сущностей, то можно, например, так...

<!doctype html>
<html>
<head>
	<title>Untitled</title>
	<meta charset="utf-8">
	<style type="text/css">
.main_container {
	display: flex;
	height: 8vmax;
	width: 8vmax;
}
.main_container > .container {
	height: 2vmax;
	width: 2vmax;
	border: 1px solid #0000CD;
	box-sizing: border-box;
}
	</style>
	<script>
document.addEventListener("click", event => {
	const container = event.target.closest(".main_container > .container");
	if(container) {
		const root = container.parentNode;
		if(root._lastContainer) 
			root._lastContainer.style.backgroundColor = "";
		container.style.backgroundColor = "rgba(192, 192, 192, 0.25)";
		root._lastContainer = container;
	}
});
	</script>
</head>
<body>
<div class="main_container">
	<div class="container"></div>
	<div class="container"></div>
	<div class="container"></div>
	<div class="container"></div>
</div>
</body>
</html>

рони, можно ведь запомнить, какой был выбран? Проверьте, что будет, если добавить ещё один main_container

рони · #6 (**permalink**) 08.12.2019, 14:11

Сообщение от Malleys

рони, можно ведь запомнить, какой был выбран? Проверьте, что будет, если добавить ещё один main_container

спасибо!

рони · #7 (**permalink**) 08.12.2019, 14:12

Сообщение от Malleys

box-sizing: border-box;

почему был добавлен этот параметр?

Форум

Справочник

Discord чат

Курсы javascript