Ajuda com href="javascript:;"

[Sergio Murilo Cabral 0]

Estou com esse código abaixo, e precisando da ajuda dos amigos para criar um evento que funcione o href="javascript:;" da DIV id="cats-list", para trazer somente os produtos referente a Categoria selecionada na DIV id="songs-list",
pois no momento ao clicar em qualquer uma das duas categorias cadastradas, esta me trazendo todos os produtos
cadastrados na tabela "PRODUTOS".

Acredito que tenha que criar um evento para essa function, porém sou muito leigo em JavaScript,
e conto com a ajuda dos amigos.

Endereço para acesso a página:
http://www.lccinformatica.com.br/

<?php include "conexao.php"; ?>

<div id="produtos-content">

<!-- Listando os Categorias -->

<?php

$nome_cat = $_POST['nome_cat'];

$img_cat = $_POST['img_cat'];

$query_categoria = mysql_query("SELECT * FROM categoria");

while($res = mysql_fetch_array($query_categoria)){

?>

<div style="float:left; width:112px; height:133px; padding:2px 10px;" id="cats-list">

<a class="cat-link" href="javascript:;" title="<?php echo $res['nome_cat']; ?>">

<img style="position:relative; top:50%; transform:translateY(-50%);"

src="img_cate/<?php echo $res['img_cat']; ?>" width="100"

title="<?php echo $res['nome_cat']; ?>" />

</a>

<div style="background:#2f2140; ; width:880px;z-index:999;border-radius:25px;" class="single-cat">

<h1 align="center" style="width:830px; margin-top:-40px;"><?php echo $res['nome_cat']; ?></h1>

<div style="margin-left:357px;width:50px;" class="cat-links">

<a class="close-btn" href="javascript:;" title="Voltar">

<img src="img/fechar.jpg" />

</a>

</div>

<?php

$codigo = $_POST['codigo'];

$img_prod = $_POST['img_prod'];

$titulo = $_POST['titulo'];

$descricao = $_POST['descricao'];

$nome_cat = $_POST['nome_cat'];

$query_produtos = mysql_query("SELECT * FROM produtos") or die(mysql_error());

while($res = mysql_fetch_array($query_produtos)){

?>

<div style="float:left; width:112px; height:133px; padding:2px 10px;" id="songs-list">

<a class="song-link" href="javascript:;" title="">

<img style="position:relative; top:50%; transform:translateY(-50%);" src="img_prod/<?php echo $res['img_prod']; ?>" width="100" title="<?php echo $res['titulo']; ?>" />

</a>

<div style=" margin-top:120px;z-index:999;border-bottom-right-radius:25px;border-top-right-radius:25px;" class="single-song">

<div style="width:50px;margin-left:300px;" class="song-links">

<a class="close-btn" href="javascript:;" title="Voltar">

<img src="img/fechar.jpg" />

</a>

<div class="song-sides">

<img style="margin:40px 0 0 -142px;" src="img_prod/<?php echo $res['img_prod']; ?>" width="369" />

</div>

</div>

<h1> <?php echo $res['titulo']; ?> </h1>

<div class="entry" style="overflow-y: hidden; padding: 0px; width: 100px;">

<p style="font-family:Verdana, Geneva, sans-serif; size:14px; font-weight:bold; color:#ccc;">

<?php echo nl2br($res['descricao']); ?>

</p>

<div class="jspContainer" style="width: 100px; height: auto;">

<div class="jspPane" style="padding: 0px; top: 0px; width: 100px;">

</div></div>

</div>

<span class="song-sides left-side"></span>

</div>

</div>

<?php } ?>

</div>

</div>

<?php

}

?>

</div>

</div>

<script type="text/javascript">

jQuery(document).ready(function(){

jQuery(".single-cat .close-btn").click(function(){

jQuery(this).parent().parent().fadeOut();

});

jQuery(".single-song .close-btn").click(function(){

jQuery(this).parent().parent().fadeOut();

});

});

</script>

[joaocarlosg 0]

Vou te explicar como se faz, primeiro coloca em todos na class=", essa classe de style que não precisa existir, exemplo:

 

OcultarTudo

 

depois, coloque o nome da categoria:

<div class="OcultarTudo Categoria<?php echo $lista['id_categoria']; ?>">

 

Agora o jquery que ira ocultar os dados, bem este deve ser feito no while que gera a listagem, antes de declarar o while, crie uma variavel em php para receber os comandos java script/jquery que serao executados mais adiante,

 

exemplo:

 

$jquery = '';

while($obj = mysql_fetch_object($query)) {

aqui dentro vai o preenchimento:

 

$jquery .= '$(".Categoria'.$obj->id.'").click(function() {

$(".OcultarTudo").hide();

$(".Categoria'.$obj->id.'").show();

});';

 

Entendendo esse trecho, estamos dizendo que é para a aplicação exibir os itens que pertencem a categoria clicada.

Ao final da pagina coloque:

 

<script type="text/javascript" charset="utf-8">

$(document).ready(function() {

<?php echo $jquery; ?>

});

</script>

[Sergio Murilo Cabral 0]

Ola joaocarlosg, realmente sou muito leigo em javascript, teria como você demonstrar no código onde e como devo fazer?