Descobrir ID de elemento através de uma Class usando JQuery
HTML, Javascript, JQuery, Sites Comentar >> Marcelo KorjenioskiDescobrir ID de elemento através de uma Class usando JQuery é o tema de hoje.
Eu não sou o tipo do programador que fica se preocupando com a quantidade de linhas por arquivo.
Gosto mesmo é de criar um código simples e de fácil manutenção. Esta semana estava querendo colocar
um efeito “slide” em algumas listas porem não queria criar uma função para cada lista. Então resolvi
criar uma classe comum para elas e atribuir IDs para os botões e para as listas. Desta maneira foi simples
resolver meu problema pois posso identificar os IDs dos elementos através da classe.
Segue o código abaixo para explicar melhor a situação.
Segue o exemplo funcionando
<head>
<title>Descobrir id de elemento usando uma classe com JQuery</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<style type="text/css">
ul {list-style:none;}
* {margin:0;padding:0;border:0px;}
html {height:100%;}
.agrupa_programacao {float:left;display:inline;width:970px;margin-top:30px;}
.divisao_programacao {float:left;display:inline;width:230px;margin-right:10px;}
.lista_programacao,.lista_programacao2 {float:left;display:inline;width:228px;margin-top:5px;background:#fff;border:1px solid #bbb;}
.lista_programacao2 {margin-top:0px;border-top:0px}
.tit_programacao, .tit_programacao2, .tit_programacao3 {float:left;display:inline;width:198px;height:20px;background:#acbcc0 url(../img/seta.jpg) no-repeat 9px 16px;padding:12px 0 12px 30px;text-align:left;font:14px Verdana, Arial, Helvetica, sans-serif;font-weight:bold;color:#fff;border-bottom:1px solid #fff;}
.tit_programacao2 {color:#133c8b;background:#f4f1f1;}
.tit_programacao3 {background:#d9eff3 url(../img/seta2.gif) no-repeat 9px 7px;padding:5px 0 5px 30px;color:#133c8b;font:bold 12px Verdana, Arial, Helvetica, sans-serif;}
h3.tit_programacao3{border-left:1px solid #BBBBBB;border-right:1px solid #BBBBBB;cursor:pointer;}
.txt_programacao, .txt_programacao2, .txt_programacao3 {float:left;display:inline;width:198px;padding:10px 15px 10px 15px;background:#f4f1f1;font:11px Verdana, Arial, Helvetica, sans-serif;color:#5e5e5e;border-bottom:1px solid #fff;}
.txt_programacao2 {background:#d7d7d7;}
.txt_programacao3 {background:#fff;}
</style>
</head>
<body>
<div>
<h3 id="frutas">Frutas</h3>
<ul id="frutas_lista">
<li id="1">Abacaxi</li>
<li id="2">Pera</li>
<li id="3">Maça</li>
</ul>
<h3 id="verduras">Legumes</h3>
<ul id="verduras_lista">
<li id="1">Alface</li>
<li id="2">Couve</li>
<li id="3">Cenoura</li>
</ul>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function(){ // Inicio o script apenas quando toda a pagina estiver carregada.
// Atribuo a função onclick em todos os elementos com a classe informada
$(".tit_programacao3").click(function () {
//Pego o ID do elemento.
var id = $(this).attr('id');
// Como defini os ids para o titulo e lista, apenas faço uma
// concatenação para identificar a lista para receber a ação.
if ($("#" + id + "_lista").is(":hidden")) {
$("#" + id + "_lista").slideDown("normal");
} else {
$("#" + id + "_lista").slideUp("normal");
}
});
});
</script>
</body>
</html>
Associando a classe com id é possível reduzir a quantidade de código facilitando a manutenção e agilizando o desenvolvimento.
Comentários são bem vindos assim posso melhorar a qualidade dos tutoriais aqui apresentados.
É isso pessoal uma ótima semana e até o próximo post.
Comentários Recentes