Javascript.RU

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

Изменение содержимого тега при клике на блок
Добрый день! Есть шесть дивов, при нажатии на див, тот див который под ним меняет класс, и соответственно принимает прописанные выше стилевые свойства к новому классу, при следующем клике, все возвращается назад. Но при клике на див, должен меняться "-" на "+" прописанный в span в этом диве. Помогите пожалуйста, вот чувствую что решение очень простое, а вот знаний и опыта мало очень. Спасибо.
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<style>
	div{
		border:1px double #000;
		width: 220px;
		padding:5px;
		color: #004485;
	}
	.head{
		background-color: #004485;
		color: #fff;
	}
	.yellou{
		color: #D58B44;
		font-weight: bold;
	}
	.foot{
		display: block;
	}
	.nofoot{
		display: none;
	}

</style>
<body>
<div class="head"><span class ="bo" rel="">-</span> Последние обновления </div>

<div class="foot">
	<span class="yellou">[8.05.2004]</span> 
		Последнее обновление софта<br>
	<span class="yellou">[2.05.2004]</span>
		В разделе "Документация" появился новый урок посвященный использованию MentalRay
	<span class="yellou">[1.05.2004]</span>
 		Добавлены 5 изображений в нашу галерею 
</div>


<div class="head"><span class ="bo" rel="">-</span> Погода в Одессе </div>

<div class="foot">
	<span class="yellou">Днем:</span>+10 - +15. Пасмурно, небольшие но противные осадки...<br>	
	<span class="yellou">Ночью:</span> как получится... :)
</div>

<div class="head"><span class ="bo" rel="">-</span> Статистика </div>

<div class="foot">
	Всего посещений:34521<br>
	Из них сегодня:21
</div>

<script>
	var heads = document.querySelectorAll('.head');//забираем в массив
	var foots = document.querySelectorAll('.foot');//забираем в массив
	var boo = document.querySelectorAll('.bo');//забираем в массив

for(let i=0;i<heads.length;i++){
	heads[i].addEventListener('click',function(){
		for(let j = 0; j<foots.length; j++){   
         foots[i].classList.toggle('nofoot')//меняем foot на nofoot  
         boo[i].innerHTML="<span>+</span>";

		}
		
         
		
		
	})
}

	console.log(heads);
	console.log(foots);
	console.log(boo);
Ответить с цитированием
  #2 (permalink)  
Старый 10.03.2018, 15:26
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Javany11,
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<style>
  div{
    border:1px double #000;
    width: 220px;
    padding:5px;
    color: #004485;
  }
  .head{
    background-color: #004485;
    color: #fff;
  }
  .yellou{
    color: #D58B44;
    font-weight: bold;
  }
  .foot{
    display: block;
  }
  .nofoot{
    display: none;
  }

</style>
<body>
<div class="head"><span class ="bo" rel="">-</span> Последние обновления </div>

<div class="foot">
  <span class="yellou">[8.05.2004]</span>
    Последнее обновление софта<br>
  <span class="yellou">[2.05.2004]</span>
    В разделе "Документация" появился новый урок посвященный использованию MentalRay
  <span class="yellou">[1.05.2004]</span>
 		Добавлены 5 изображений в нашу галерею
</div>


<div class="head"><span class ="bo" rel="">-</span> Погода в Одессе </div>

<div class="foot">
  <span class="yellou">Днем:</span>+10 - +15. Пасмурно, небольшие но противные осадки...<br>
  <span class="yellou">Ночью:</span> как получится... :)
</div>

<div class="head"><span class ="bo" rel="">-</span> Статистика </div>

<div class="foot">
  Всего посещений:34521<br>
  Из них сегодня:21
</div>

<script>
"use strict"
  var heads = document.querySelectorAll('.head');//забираем в массив
  var foots = document.querySelectorAll('.foot');//забираем в массив
  var boo = document.querySelectorAll('.bo');//забираем в массив
[].forEach.call(heads, function(item,i) {
        item.addEventListener('click', function() {
             foots[i].classList.toggle('nofoot')//меняем foot на nofoot
             boo[i].innerHTML=["-","+"][+foots[i].classList.contains("nofoot")];
        });
    });


  console.log(heads);
  console.log(foots);
  console.log(boo);
</script>
</body>
</html>
Ответить с цитированием
  #3 (permalink)  
Старый 10.03.2018, 15:29
Аспирант
Отправить личное сообщение для Javany11 Посмотреть профиль Найти все сообщения от Javany11
 
Регистрация: 04.03.2018
Сообщений: 34

Спасибо огромное. Очень помогли.
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Появление/исчезновение дива при клике на ссылку nickostyle jQuery 5 18.01.2016 03:03
изменение цвета при клике apol775 jQuery 30 29.11.2015 17:05
Изменение прозрачности при клике AJIUK jQuery 8 09.03.2014 16:00
Изменение содержимого div при выборе чекбокса TypokSergey jQuery 1 25.02.2014 08:27
Запись cookes при клике pavdin Общие вопросы Javascript 3 06.02.2012 17:19