Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Seguinte, se alguém puder me ajudar, não manjo muito de jquery cheguei nesse código lendo umas coisas la no site oficial, mas ai me deparei com o seguinte ao clicar ele muda a image, que no caso esse é o meu objetivo, mas só que eu quero que ele mude apenas a que eu clicar, ai nesse código se eu clicar na primeia ele automaticamente muda todas tmb é ai que mora a minha dúvida como mudar isso? sei que posso repetir os códigos mudando alguma coisa colocando id na tag, mas ai ficaria enorme o código, gostaria de saber se tem alguma forma mais enxuta de se fazer isso, agradeço desde ja.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link rel="stylesheet" href="css/classes.css" type="text/css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<title></title>
</head>
<body>
<script type="text/javascript">
$(document).ready(function(){
$("img").click(function(){
$("img").attr('src', 'images/presenca.png');
});
});
</script>
<img src="images/falta.png"/>
<img src="images/falta.png"/>
<img src="images/falta.png"/>
<img src="images/falta.png"/>
<img src="images/falta.png"/>
<img src="images/falta.png"/>
<img src="images/falta.png"/>
<img src="images/falta.png"/>
</body>
</html>Ta consegui fazer assim mas tipo seu precisar de uns 30 vai fica gigante meu código. tem como simplificar isso?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link rel="stylesheet" href="css/classes.css" type="text/css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<title></title>
</head>
<body>
<script type="text/javascript">
$(document).ready(function(){
$("#1").bind("click", function(){
$("#1").attr('src', 'images/presenca.png');
});
$("#1").bind("dblclick", function(){
$("#1").attr('src', 'images/falta.png');
});
$("#2").bind("click", function(){
$("#2").attr('src', 'images/presenca.png');
});
$("#2").bind("dblclick", function(){
$("#2").attr('src', 'images/falta.png');
});
$("#3").bind("click", function(){
$("#3").attr('src', 'images/presenca.png');
});
$("#3").bind("dblclick", function(){
$("#3").attr('src', 'images/falta.png');
});
});
// $("#2").attr('src', 'images/presenca.png');
//$("#3").attr('src', 'images/presenca.png');
// $("#4").attr('src', 'images/presenca.png');
// $("#5").attr('src', 'images/presenca.png');
// $("#6").attr('src', 'images/presenca.png');
// $("#7").attr('src', 'images/presenca.png');
//$("#8").attr('src', 'images/presenca.png');
</script>
<img id="1" src="images/falta.png"/><br><br>
<img id="2" src="images/falta.png"/><br><br>
<img id="3" src="images/falta.png"/><br><br>
<!--<img id="4" src="images/falta.png"/><br><br>
<img id="5" src="images/falta.png"/><br><br>
<img id="6" src="images/falta.png"/><br><br>
<img id="7" src="images/falta.png"/><br><br>
<img id="8" src="images/falta.png"/><br><br>-->
</body>
</html>Carregando comentários...