Форум

libinstyle · #1 (**permalink**) 24.03.2010, 03:25

Здравствуйте! Помоги те пожалуйста, не могу понять в чем проблема.
В 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.
По той же причине прошу, если кто понимает, написать готовую строку такого скрипта.
Зарание огромное спасибо!

Octane · #2 (**permalink**) 24.03.2010, 03:56

Внутри <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>

libinstyle · #3 (**permalink**) 24.03.2010, 04:46

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

Форум

Справочник

Discord чат

Курсы javascript