Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 24.03.2010, 03:25
Аспирант
Отправить личное сообщение для libinstyle Посмотреть профиль Найти все сообщения от libinstyle
 
Регистрация: 23.03.2010
Сообщений: 54

jQuery Изменение цвета дочерних элементов
Здравствуйте! Помоги те пожалуйста, не могу понять в чем проблема.
В jQuery мало понимаю, Нужно взять елемент по его ID и изменить цвет всех DIV'ов внутри него.
Вот мой код

<script type="text/javascript" src="js/jquery.js"></script> 
<script type="text/javascript">
$(document).ready(function() {
	$("#butt").click(function(){
	$("#mainn")                // 1
    .find("div").css("background", "green");
	
							   });// 3
	



	}
);
</script>


<body>
<button id='butt'>Click Me</button>
<p id='mainn'>

<div id='first'>One</div>

<div id='second'>Two</div>

<div id='theard'>three</div>

</p>

</body>


Не работает, не могу понять почему, от части потому что первый раз сталкиваюсь jQuery.
По той же причине прошу, если кто понимает, написать готовую строку такого скрипта.
Зарание огромное спасибо!
Ответить с цитированием
  #2 (permalink)  
Старый 24.03.2010, 03:56
Отправить личное сообщение для Octane Посмотреть профиль Найти все сообщения от Octane  
Регистрация: 10.07.2008
Сообщений: 3,873

Внутри <p> не может быть <div>, учите HTML!

Есть способ сделать быстрее:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>…</title>
</head>
<body>
	<style type="text/css">
	#main.green .colored {
		background-color: #9f3;
	}
	</style>
	<button id="but">Click Me</button>
	<div id="main">
		<div class="colored">One</div>
		…
		<div class="colored">Two</div>
		…
		<div class="colored">Three</div>
	</div>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
	<script type="text/javascript">
		$("#but").click(function () {
			$("#main").addClass("green");
		});
	</script>
</body>
</html>

Или вообще без jQuery:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>…</title>
</head>
<body>
	<style type="text/css">
	#main.green .colored {
		background-color: #9f3;
	}
	</style>
	<button id="but">Click Me</button>
	<div id="main">
		<div class="colored">One</div>
		…
		<div class="colored">Two</div>
		…
		<div class="colored">Three</div>
	</div>
	<script type="text/javascript">
		document.getElementById("but").onclick = function () {
			document.getElementById("main").className = "green";
		};
	</script>
</body>
</html>
Ответить с цитированием
  #3 (permalink)  
Старый 24.03.2010, 04:46
Аспирант
Отправить личное сообщение для libinstyle Посмотреть профиль Найти все сообщения от libinstyle
 
Регистрация: 23.03.2010
Сообщений: 54

То, что это можно сделать без jquery- вообще шикарно! Единственное, что one two three - это варианты ответов, и при щелканьи на одном из них, он должен становиться зеленым, а при щелчке на другом, предыдущий становится белый, а этот - зеленый.
Усложняет проблему то, что блоков ДИВ 30 штук и их ID генерируется (main1,main2...main30), и в каждом из них еще по 4 див с вариантами ответов. Так что, лучше чтобы функция вызывалась из элемента ответа и заодно передовала в виде параметра свой ID и main в котором она находится,
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Jquery. Изменение background-image digital_sword jQuery 26 30.08.2013 16:58
Как изменить background всех дочерних элементов внутри <div>? libinstyle Общие вопросы Javascript 2 24.03.2010 13:25
изменение цвета фона alina Общие вопросы Javascript 1 27.12.2009 17:23
Изменение цвета ячейки (динамическая таблица) не по событию ImSWORDMASTER Элементы интерфейса 3 12.03.2009 21:21
Сложный случай jQuery + AJAX + динамическое изменение страницы Opera/IE no. Общие вопросы Javascript 2 24.02.2009 04:24