função jquery para mover div vinda do BD dinamicamente em página php

[carlosmadeiracunha 3]

Estou com um probleminha que não consigo solucionar,
tenho uma página em php que busca dados vindos de um banco dinamicamente para inserir numa div, esta div tem um looping "while" para que possa duplicá-la quantas vezes forem necessárias.

Fiz uma função para jquery que move esta div para cima e aparece o player ao clicar em um botão, a função faz o serviço certinho mas move as outras também pois todas elas, por estarem em looping, têm a mesma classe.

Agora é que vem a minha pergunta, tem como inserir o id vindo do banco nesta minha função para que quando clicado o botão apenas se mova a div contida no box deste botão?

Para que possam entender, o endereço do site é este: http://joaorickeeduardo.hol.es/, oque eu preciso está na parte dos vídeos, se clicarem nos botões "play" de cor marron claro, vocês poderão ver que todas elas se movem.

A função:

<!-- função animate --->
<script type="text/javascript">
$(function() {
$(".bt_play_video").click(function(){
  $(".movable").animate({
    // distancia da margem a esquerda
    marginLeft: "0px",
    // distância do topo
    marginTop: "-205px"
    // tempo de execucao - milissegundos
    }, 1000, function() {
     $(this).html();
	});
  });
});
</script>
<!-- /função animate --->

Agora o código php/html

<?php
$sql_videos = mysql_query("SELECT * FROM videos LIMIT 4");
		
	while($todos_videos = mysql_fetch_array($sql_videos)){
	$id 		= $todos_videos['id'];
	$nome		= $todos_videos['nome']; 
	$videoclipe = $todos_videos['videoclipe'];
	$descricao  = $todos_videos['descricao']; 
			
					
//retirando caracteres da string $video para poder exibir a imagem em vídeo
	$capa_video = substr($videoclipe, 32); //Retira os 32 primeiros caracteres;
?>
	<div id="video">
		<div  id="move" class="movable">
			<div class="bt_play_video"></div>	
				<div class="descricao">
					<?php echo $descricao; ?>
				</div><!-- div id="descricao" -->
				<img class="sobe" src="https://i.ytimg.com/vi/<?php echo $capa_video;?>/mqdefault.jpg"  />
				<iframe class="sobe" src="//www.youtube.com/embed/<?php echo $capa_video;?>?vq=hd1080?fs=1&autohide=1&theme=light&hl=en_US&PARAMETER" frameborder="0" allowfullscreen>
				</iframe>
			</div><!-- div class="movable" -->
	</div><!-- div id="video" -->

<?php
	} //while($todos_videos = mysql_fetch_array($sql_videos)){
?>

Acho que tem como fazer pois já ví em sites, mas só não sei como.
Pensei em colocar dinamicamente a função dentro do while e acho que isso não seria legal, ou seria?

Desde já agradeço.

[carlosmadeiracunha 3]

Valeu pela dica Handoncloudsys, mas eu também não entendo de javascript e então fiquei na mesma pois não consegui fazer a tua ideia decolar, mas vou tentando ver como fazê-la funcionar, talvez dê sim, estou procurando algo como this.id ou algo assim, nem sei por onde começar porque não consigo também formular perguntas para pesquisar pela internet, kkkkkkkkkk,

eu fiz o seguinte:

coloquei a função dentro o while e adicionei o id dinâmico na função e funcionou, mas não acho que esteja certo, ou está?
Pra mim foi uma "gambiarra" pois penso que a função deveria ser única.

ficou assim:

<?php
$sql_videos = mysql_query("SELECT * FROM videos LIMIT 4");
		
	while($todos_videos = mysql_fetch_array($sql_videos)){
	$id 		= $todos_videos['id'];
	$nome		= $todos_videos['nome']; 
	$videoclipe = $todos_videos['videoclipe'];
	$descricao  = $todos_videos['descricao']; 
			
					
//retirando caracteres da string $video para poder exibir a imagem em vídeo
	$capa_video = substr($videoclipe, 32); //Retira os 32 primeiros caracteres;
?>
	<!-- função animate --->
	<script type="text/javascript">
		$(function() {
		$("#<?php echo $id;?>").click(function(){
			$(".<?php echo $id;?>").animate({
			// distancia da margem a esquerda
			marginLeft: "0px",
			// distância do topo
			marginTop: "-205px"
			// tempo de execucao - milissegundos
			}, 1000, function() {
			$(this).html();
			});
		});
	});
	</script>
	<div id="video">
		<div class="<?php echo $id;?>">
			<div id="<?php echo $id;?>" class="bt_play_video"></div>	
				<div class="descricao">
					<?php echo $descricao; ?>
				</div><!-- div id="descricao" -->
				<img class="sobe" src="https://i.ytimg.com/vi/<?php echo $capa_video;?>/mqdefault.jpg"  />
				<iframe class="sobe" src="//www.youtube.com/embed/<?php echo $capa_video;?>?vq=hd1080?fs=1&autohide=1&theme=light&hl=en_US&PARAMETER" frameborder="0" allowfullscreen>
				</iframe>
			</div><!-- div class="movable" -->
	</div><!-- div id="video" -->
<?php
	} //@ fecha while($todos_videos = mysql_fetch_array($sql_videos)){
?>

Alguém pode me dizer se oque eu fiz está correto ou é mesmo uma gambiarra? se for gambiarra, como fazer?

Obrigado.
OBS: As alterações já foram feitas no site online, é só ir lá pra conferir.

[carlosmadeiracunha 3]

 

 

Ainda não dei como resolvido porque ainda estou achando que fiz uma gambiarra.

[Diegus Miestro 21]

Bem, pelas regras do W3C, não pode haver mais de um mesmo ID, então esse seu loop tá criando vários ID video e move

 

O que vc quer fazer é alterar a organização de elementos de uma página HTML? Porque se se for, então teu questionamento é mais Javascript, especificamente jQuery.

<!-- função animate --->
<script type="text/javascript">
$(function() {
$(".bt_play_video").click(function(){
  $(this).parent(".movable").animate({ // Linha que alterei, pega o elemento pai '.movable' do elemento '.bt_play_video' que foi clicado
    // distancia da margem a esquerda
    marginLeft: "0px",
    // distância do topo
    marginTop: "-205px"
    // tempo de execucao - milissegundos
    }, 1000, function() {
     $(this).html();
	});
  });
});
</script>
<!-- /função animate --->

PS: Não testei, mas deve alterar o CSS que tá alterando ai no teu código. Acredito que não terá o resultado esperado, pois ele apenas altera a informação do que clicou, então se clicou em 3, os 3 terão subido e nenhum voltado.

[carlosmadeiracunha 3]

Diegus Miestro, este seu script não funcionou, mas obrigado pela tentativa.

 

Oque você quis dizer com isso aqui?
"Bem, pelas regras do W3C, não pode haver mais de um mesmo ID, então esse seu loop tá criando vários ID video e move".

 

Se eu entendi bem, então devo te explicar que não, o looping não está criando, ele está buscando do Banco o id de cada vídeo, portanto não existe id duplicado.

 

Se na regra do W3C não pode haver o mesmo id, então pela regra deles eu estou certo, mesmo achando que o W3C não é o dono da verdade.

 

Depois de pesquisar bastante pela web não encontrei nada que pudesse me ajudar, ninguém me falou pra colocar o script dentro do looping, eu mesmo pensei nisso, foi daí que veio a dúvida, será que está certo? não tem uma outra forma de fazer?

 

Mesmo assim, obrigado, mas ainda estou pesquisando por uma outra forma de fazer a "identificação do box do bt_play_video clicado" porque se o script não estiver dentro do looping e o botão bt_play_video for clicado ele vai mover todos os div´s com a classe move e não importa em qual box o botão estã.

 

Por enquanto o script vai ficar dentro do looping mesmo.

[William Bruno 1501]

portanto não existe id duplicado.

ele está falando do atributo ID do html:

<div id="<?php echo $id;?>" class="bt_play_video"></div>

ai você duplica o ID do html.

 

 

mesmo achando que o W3C não é o dono da verdade.

eles não são, mas ai é a definição da linguagem HTML.

A linguagem HTML não permite que você tenha IDs duplicados no HTML. Pois isso torna impossível para o JavaScript selecionar os elementos.

 

 

ninguém me falou pra colocar o script dentro do looping

isso é errado, pois vai te causar mais problemas.

 

A forma correta de fazer, é como o @Diegus mostrou:

$(this).parent(".movable")

utilizando o this e navegando no DOM.

[Diegus Miestro 21]

Bem, fiz um exemplo que não sei se é o que vai resolver o teu problema, mas vale dar uma olhada.

 

PS: Fiz de forma que possa haver mais de uma lista na mesma página sem haver interferência uma com a outra

 

PS2: Como disse, HTML não pode repetir o ID, então coloquei tudo como class, que pode haver repetição e mais de um no mesmo elemento

 

http://jsfiddle.net/h1ek4kn4/1/

[carlosmadeiracunha 3]

Agora entendi o que o Diegus Maestro quis dizer graças ao William Bruno, que por acaso tenho seguido vários tutoriais no seu site.

 

E a você Diegus, o meu muito obrigado, eu ví o seu exemplo e ficou muito bom, nem vou colocar oque eu fiz porque a partir do teu exemplo pode-se usá-lo para outras funcionalidades, é só usar a imaginação.

 

Dou como resolvido este meu tópico e obrigado novamente aos dois.

 

Até a próxima.