Javascript.RU

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

Выбрать дочерний элемент, того по которому кликнули
У меня куча блоков с классом в которых есть блок с классом text_element.
Я написал скрипт для скрытия блока text_element при нажатии на element
Я нажимаю на блок с классом element и скрываются все блоки text_element, а мне нужно что-бы скрылся только тот что находится в блоке по которому кликнули. Заранее спасибо!

Вот страница
<?php 
$db = mysql_connect("localhost","mol","malik");
mysql_select_db("vzale.ru",$db);
//Перекодируем результат в требуемую форму
mysql_query("SET NAMES cp1251"); 

 ?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Language" content="ru">
<script src='scripts/jquery.js'></script>
<script src='scripts/jsA.js'></script>
<link rel='stylesheet' type='text/css' href='style.css'>
<title>Главная</title>

</head>
<body>
<div class='container'>
<?php
$result = mysql_query("SELECT * FROM lessons");
$myrow	= mysql_fetch_array($result);				
do{
printf("
<div id='element'>
	<a href=''><div class='head_element'><h4>%s</h4></div></a>
	<div class=' img_element'><img src='%s' width='270px' height='110px'></div>
	<div class='text_element'>%s</div>
	<div class='info_element'><p>Автор: %s Добавлено: %s</p></div>
	<a href=''><div class='add_element'><p>Добавить</p></div></a>
</div>"
,$myrow["name"], $myrow["img"],$myrow["description"], $myrow["author"],$myrow["date"]);						
}
while($myrow = mysql_fetch_array ($result));					
?>
<div class='clear_float'></div>					
</div>
</body>
</html>

А вот скрипт
$(document).ready(function(){
	$('#element').toggle(function(){
	$('.text_element').slideDown(250);
	},
	function(){
	$('.text_element').slideUp(250);
	}	
	);
});


И CSS, если нужно, только половина там лишняя
Код:
body{
margin:0;
}
.container{
box-shadow: 0 0 15px rgba(0,0,0,0.5);
padding:30px 10px;
width:576px;
margin:auto;

}
p  {
margin:0;
padding:5px 9px;
}
a {
text-decoration:none;
}
.head_element{
background-color:#000;
opacity:0.5;
color:#8E8E8E;
border-top-left-radius:3px;
border-top-right-radius:3px;
}
.head_element h4{
opacity:1;
}
.img_element{
padding:5px;
opacity:0.8;
}
.img_element:hover{
}
.text_element{
padding:5px;

}
.text_element p{
padding:0;
font-family: "Verdana";
font-size:13px;
color:#4D4D4D;
}
.info_element{
font-size:14px;
color:#8E8E8E;
text-align:left;
}
.info_element a{
color:#8E8E8E;
text-decoration:underline;
}
.add_element{
color:#8E8E8E;
background-color:#000;
opacity:0.5;
text-align:center;
font-weight:900;
cursor:pointer;
border-bottom-left-radius:3px;
border-bottom-right-radius:3px;
}
.add_element:hover{
color:#414141;
}
#element{
background-image:url(img/groovepaper.png);
width:280px;
font-family: "Calibri";
margin-bottom:20px;
border-top:1px solid #CDCDCD;
border-left:1px solid #AFAFAF;
border-bottom:1px solid #656565;
border-right:1px solid #AFAFAF;
border-radius:4px;
}
#element:nth-child(odd){
float:left;
}
#element:nth-child(even){
float:right;
}

#element:hover{
box-shadow: 0 0 15px rgba(0,0,0,0.5);
}
h1, h2, h3, h4, h5, h6{
padding:4px;
margin:0 auto;
}
.clear_float{
clear:both;
}
Ответить с цитированием
  #2 (permalink)  
Старый 28.11.2012, 08:28
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,124

Сообщение от MalikSPB
Я нажимаю на блок с классом element
У тебя там ИД, что не есть правильно...

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<!--
<link rel="stylesheet" type="text/css" href="tmp.css" />
-->
<style type="text/css">
</style>
<script type="text/javascript">
$(document).ready(function (){
	$('.element').click(function (){
		$('.text_element',this).toggle();
	});
});
</script>
</head>
<body>
<div class='element'>
	<a href=''><div class='head_element'><h4>head_element 1</h4></div></a>
	<div class=' img_element'><img src='%s' width='270px' height='110px'></div>
	<div class='text_element'>text_element 1</div>
	<div class='info_element'><p>Автор: %s Добавлено: %s</p></div>
	<a href=''><div class='add_element'><p>Добавить</p></div></a>
</div>
<div class='element'>
	<a href=''><div class='head_element'><h4>head_element 2</h4></div></a>
	<div class=' img_element'><img src='%s' width='270px' height='110px'></div>
	<div class='text_element'>text_element 2</div>
	<div class='info_element'><p>Автор: %s Добавлено: %s</p></div>
	<a href=''><div class='add_element'><p>Добавить</p></div></a>
</div>
</body>
</html>
Ответить с цитированием
  #3 (permalink)  
Старый 28.11.2012, 22:43
Аватар для MalikSPB
Интересующийся
Отправить личное сообщение для MalikSPB Посмотреть профиль Найти все сообщения от MalikSPB
 
Регистрация: 27.11.2012
Сообщений: 15

Спасибо за ответ, но почему Ид не есть правильно?
Ответить с цитированием
  #4 (permalink)  
Старый 28.11.2012, 22:46
Аватар для lord2kim
Профессор
Отправить личное сообщение для lord2kim Посмотреть профиль Найти все сообщения от lord2kim
 
Регистрация: 03.05.2011
Сообщений: 848

MalikSPB, вообщето id является универсальным идентификатором на странице...
Ответить с цитированием
  #5 (permalink)  
Старый 28.11.2012, 23:34
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,124

Сообщение от lord2kim
id является универсальным идентификатором на странице...
Уникальным.
Ответить с цитированием
  #6 (permalink)  
Старый 28.11.2012, 23:38
Аватар для lord2kim
Профессор
Отправить личное сообщение для lord2kim Посмотреть профиль Найти все сообщения от lord2kim
 
Регистрация: 03.05.2011
Сообщений: 848

ksa, ну да...
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
не могу выбрать элемент alex2012 AJAX и COMET 2 05.11.2012 02:15
Как вытащить дочерний элемент? alexandr_v-vich Элементы интерфейса 7 29.02.2012 14:35
Как выбрать элемент в который вложен.. prolapse Events/DOM/Window 8 28.10.2011 10:18
Выбрать предпоследний элемент stqel Общие вопросы Javascript 6 21.07.2010 10:06
задействовать только дочерний элемент roma86 jQuery 2 03.10.2009 21:36