Esconder elementos com javascript

[Nilton filho 0]

Olá , beleza !

 

Gostaria de saber como faço para mostrar/esconder algumas imagens de uma certa categoria.

exemplo:tenho uma série de imagens em um site , mas algumas delas são da categoria WEB e o restantate são da categoria APP, queria que quando clicasse no botão web , mostrasse todas as imagens de web , quando clicasse no botão app mostrasse todas as imagens de app e por ultimo quando clicasse em todos mostrasse ambas as categorias.

Vlw , fico no aguardo.

[reebr 94]

"categoria APP" e "categoria WEB" são classes?

[angelorubin 142]

As imagens (ou sua localização) estão em um banco de dados?

[Nilton filho 0]

<div class="row" id="trabalhos-realizados" >

<div id="web" class="col-md-3 col-sm-3 col-xs-6">
<img  src="images/imagens/model4.png" alt="">
</div>

<div id="web" class="col-md-3 col-sm-3 col-xs-6">
<img  src="images/imagens/model3.png" alt="">
</div>

<div id="app" class="col-md-3 col-sm-3 col-xs-6">
<img  src="images/imagens/model5.png" alt="">
</div>

<div id="app" class="col-md-3 col-sm-3 col-xs-6">
<img  src="images/imagens/model6.png" alt="">
</div>
</div>

a categoria é um ID . Gostaria que quando clicasse no botão , mostrasse somente as imagens que tem o ID da categoria.

No momento não estou utilizando banco de dados . mas posteriormente irei utilizar.

Vlw.

[angelorubin 142]

Olá,

 

Não sei se é a melhor forma.

 

http://angelorubin.besaba.com/Imasters/Php/esconder-elementos-javascript.php

 

JS

<script type="text/javascript">
		window.onload = function(){
			document.getElementById('web').addEventListener('click', function() {
    			var app = document.getElementsByClassName('app');
    			var web = document.getElementsByClassName('web');
    			for (var i = 0; i < app.length; i++) {
    				app[i].style.display = 'none';
    			}
    			for (var i = 0; i < web.length; i++) {
    				web[i].style.display = '';
    			}
    		});
    		document.getElementById('app').addEventListener('click', function() {
    			var app = document.getElementsByClassName('app');
    			var web = document.getElementsByClassName('web');
    			for (var i = 0; i < web.length; i++) {
    				web[i].style.display = 'none';
    			}
    			for (var i = 0; i < app.length; i++) {
    				app[i].style.display = '';
    			}
    		});
    		document.getElementById('all').addEventListener('click', function() {
    			var all = document.getElementById('trabalhos-realizados').getElementsByTagName('div');
    			for (var i = 0; i < all.length; i++) {
    				all[i].style.display = '';
    			}
    		});
		}
	</script>

HTML

<button type="button" id="web">web</button>
<button type="button" id="app">app</button>
<button type="button" id="all">all</button>

<hr/>
	
	<div class="row" id="trabalhos-realizados">

		<div class="col-md-3 col-sm-3 col-xs-6 web">
			<img  src="img/male.png" alt="">
		</div>

		<div class="col-md-3 col-sm-3 col-xs-6 web">
			<img  src="img/male.png" alt="">
		</div>

		<div class="col-md-3 col-sm-3 col-xs-6 app">
			<img  src="img/female.png" alt="">
		</div>

		<div class="col-md-3 col-sm-3 col-xs-6 app">
			<img  src="img/female.png" alt="">
		</div>

	</div>

Espero que ajude.

[Nilton filho 0]

Olá,

 

Não sei se é a melhor forma.

 

http://angelorubin.besaba.com/Imasters/Php/esconder-elementos-javascript.php

 

JS

<script type="text/javascript">
		window.onload = function(){
			document.getElementById('web').addEventListener('click', function() {
    			var app = document.getElementsByClassName('app');
    			var web = document.getElementsByClassName('web');
    			for (var i = 0; i < app.length; i++) {
    				app[i].style.display = 'none';
    			}
    			for (var i = 0; i < web.length; i++) {
    				web[i].style.display = '';
    			}
    		});
    		document.getElementById('app').addEventListener('click', function() {
    			var app = document.getElementsByClassName('app');
    			var web = document.getElementsByClassName('web');
    			for (var i = 0; i < web.length; i++) {
    				web[i].style.display = 'none';
    			}
    			for (var i = 0; i < app.length; i++) {
    				app[i].style.display = '';
    			}
    		});
    		document.getElementById('all').addEventListener('click', function() {
    			var all = document.getElementById('trabalhos-realizados').getElementsByTagName('div');
    			for (var i = 0; i < all.length; i++) {
    				all[i].style.display = '';
    			}
    		});
		}
	</script>

HTML

<button type="button" id="web">web</button>
<button type="button" id="app">app</button>
<button type="button" id="all">all</button>

<hr/>
	
	<div class="row" id="trabalhos-realizados">

		<div class="col-md-3 col-sm-3 col-xs-6 web">
			<img  src="img/male.png" alt="">
		</div>

		<div class="col-md-3 col-sm-3 col-xs-6 web">
			<img  src="img/male.png" alt="">
		</div>

		<div class="col-md-3 col-sm-3 col-xs-6 app">
			<img  src="img/female.png" alt="">
		</div>

		<div class="col-md-3 col-sm-3 col-xs-6 app">
			<img  src="img/female.png" alt="">
		</div>

	</div>

Espero que ajude.

 

Vlw , ajudou mesmo :D , agora so vou adptar para a realidade do meu projeto.

até mais!