Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 08.12.2019, 10:07
Аватар для Georgie0409
Новичок на форуме
Отправить личное сообщение для Georgie0409 Посмотреть профиль Найти все сообщения от Georgie0409
 
Регистрация: 08.12.2019
Сообщений: 6

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

Я использую JS, так что если можно через него, то подскажите, буду рад. Заранее спасибо
Ответить с цитированием
  #2 (permalink)  
Старый 08.12.2019, 10:08
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

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

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

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.
Ответить с цитированием
  #3 (permalink)  
Старый 08.12.2019, 10:34
Аватар для Georgie0409
Новичок на форуме
Отправить личное сообщение для Georgie0409 Посмотреть профиль Найти все сообщения от Georgie0409
 
Регистрация: 08.12.2019
Сообщений: 6

<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, но у меня в основном коде очень много блоков и я просто изуродую код)
Может можно как-то сделать по другому?

Последний раз редактировалось Georgie0409, 08.12.2019 в 10:37.
Ответить с цитированием
  #4 (permalink)  
Старый 08.12.2019, 10:54
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

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>
Ответить с цитированием
  #5 (permalink)  
Старый 08.12.2019, 13:21
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 1,714

Если без привлечения лишних сущностей, то можно, например, так...
<!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
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Сообщение от Malleys
рони, можно ведь запомнить, какой был выбран? Проверьте, что будет, если добавить ещё один main_container
спасибо!
Ответить с цитированием
  #7 (permalink)  
Старый 08.12.2019, 14:12
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Сообщение от Malleys
 box-sizing: border-box;
почему был добавлен этот параметр?
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Автоматический старт при при горизонтальной прокрутке div блоков admin'ko Элементы интерфейса 3 13.02.2015 09:40
Открытие\закрытие блока при нажатии на ссылку.Помогите kostya1986 Элементы интерфейса 2 19.01.2015 16:34
Изменение текста при наведении xformer jQuery 2 11.07.2014 10:09
при нажатии на раздел меню поворачивается маркер Сергей545 Элементы интерфейса 5 08.12.2013 22:15
Изменение позиции блоков при увеличении изображения vyrtime Общие вопросы Javascript 2 14.10.2011 12:24