Adicionando class css via JS

JonatanMachado · Março 7, 2013

Ola estou fazendo um codigo que adiciona class num elemento html quando carega a pagina ele adiciona uma class que tem display:none; ai tem um botao quando apertado queria que ele colocase uma class sem display:none; para o primeiro NOME e RG se apertado no + novamente o segundo NOME e RG sucessivamente aparese esta confuzo mais se tiver duvida eu respondo xD

<html><head><style>.inv{	display:none;}</style><script type="text/javascript">      window.onload = function(){	var divs = document.getElementsByTagName('dl');		for( var i=0; i<divs.length; i++ )	{		var ps = divs[ i ].getElementsByTagName('dt');						for( var j=0; j<ps.length; j++ )		{			ps[ j ].className = 'inv';		}	}	for( var i=0; i<divs.length; i++ )	{				var ps = divs[ i ].getElementsByTagName('dd');				for( var j=0; j<ps.length; j++ )		{			ps[ j ].className = 'inv';		}	}}    </script>   <script type="text/javascript">       function aparece(){	var divs = document.getElementsByTagName('dl');		for( var i=0; i<divs.length; i++ )	{		var ps = divs[ i ].getElementsByTagName('dt');						for( var j=0; j<ps.length; j++ )		{			ps[ j ].className = 'aparece';		}	}	for( var i=0; i<divs.length; i++ )	{				var ps = divs[ i ].getElementsByTagName('dd');				for( var j=0; j<ps.length; j++ )		{			ps[ j ].className = 'aparece';		}	}}    </script>      <input type="button" onclick="aparece();" value="+"/>    </head>    <body>     <dl class="last"><dt><label class="required"><em>*</em>NOME</label></dt><dd><div class="input-box"><input type="text" onchange="opConfig.reloadPrice()" id="options_6_text" class="input-text required-entry product-custom-option" name="options[6]" value=""/>ev</div></dd><dt><label class="required"><em>*</em>RG</label></dt><dd><div class="input-box"><input type="text" onchange="opConfig.reloadPrice()" id="options_8_text" class="input-text required-entry product-custom-option" name="options[8]" value=""/>ev</div></dd><dt><label class="required"><em>*</em>NOME</label></dt><dd><div class="input-box"><input type="text" onchange="opConfig.reloadPrice()" id="options_9_text" class="input-text required-entry product-custom-option" name="options[9]" value=""/>ev</div></dd><dt><label class="required"><em>*</em>RG</label></dt><dd><div class="input-box"><input type="text" onchange="opConfig.reloadPrice()" id="options_7_text" class="input-text required-entry product-custom-option" name="options[7]" value=""/>ev</div></dd><dt><label class="required"><em>*</em>NOME</label></dt><dd><div class="input-box"><input type="text" onchange="opConfig.reloadPrice()" id="options_10_text" class="input-text required-entry product-custom-option" name="options[10]" value=""/>ev</div></dd><dt><label class="required"><em>*</em>RG</label></dt><dd><div class="input-box"><input type="text" onchange="opConfig.reloadPrice()" id="options_3_text" class="input-text required-entry product-custom-option" name="options[3]" value=""/>ev</div></dd><dt><label class="required"><em>*</em>NOME</label></dt><dd><div class="input-box"><input type="text" onchange="opConfig.reloadPrice()" id="options_5_text" class="input-text required-entry product-custom-option" name="options[5]" value=""/>ev</div></dd><dt><label class="required"><em>*</em>RG</label></dt><dd class="last"><div class="input-box"><input type="text" onchange="opConfig.reloadPrice()" id="options_2_text" class="input-text required-entry product-custom-option" name="options[2]" value=""/>ev</div></dd></dl>    </body></html>

Na verdade queria que aparece um NOME e RG quando carrega-se a pagina e quando clicava no + ia aparecendo os outros um por um

Alguém pode me ajudar? xD

matthee · Março 7, 2013

vc vai ter que ouvir o evento do click do elemento ai vc vai setar o display none ou block no outro elemento que vc quer esse "efeito" da seguinte maneira, document.getElementById("idDoElemento").style.display = "none" ou "block" ou "inline";

JonatanMachado · Março 7, 2013

As tag que eu queria colocar nao tem id nem class, e tenho que por em javascript

Na verdade queria que aparece um NOME e um RG quando carrega-se a pagina.

E quando clicava no + ia aparecendo os outros um por um

Quando carregar a pagina aparecer assim

<dt>

</dt>

<dd>

</dd>

quando apertao no +

<dt>

</dt>

<dd>

</dd>

<dt>

</dt>

<dd>

</dd>

assim sucessivamente xD

Não estou conseguindo. so consigo que colocar display:none; en todos as tag dt dd e quando apertar o botao + colocar display:block; ai todas as tag dt dd aparecem

William Bruno · Março 7, 2013

cara, só tem alguns erros de semântica no teu html.

dt não era para vc usar assim.. e nem as dds.

Exemplo do que vc quer, já corrigindo o html:

<html>
<head>
<style type="text/css">
.inv{ display: none; }
</style>

<script type="text/javascript">
var i = 0;
var alteraClassName = function( arr, name ){
	for( var i=0; i<arr.length; i++ ){
		arr[i].className = name;
	}
}
window.onload = function(){	
	var fieldsets = document.getElementsByTagName('fieldset');

	alteraClassName( fieldsets, 'inv' );


	document.getElementById('aparece').onclick = function(){
		fieldsets[i].style.display = 'block';
		i++;
	}
}
</script>
</head>
<body>


<input type="button" id="aparece" value="+"/>

<fieldset>
	<label class="required"> <em>*</em>NOME </label>

	<div class="input-box">
		<input type="text" onchange="opConfig.reloadPrice()" value=""/>ev
	</div>
</fieldset>
<fieldset>
	<label class="required"> <em>*</em>NOME </label>

	<div class="input-box">
		<input type="text" onchange="opConfig.reloadPrice()" value=""/>ev
	</div>
</fieldset>
<fieldset>
	<label class="required"> <em>*</em>NOME </label>

	<div class="input-box">
		<input type="text" onchange="opConfig.reloadPrice()" value=""/>ev
	</div>
</fieldset>
<fieldset>
	<label class="required"> <em>*</em>NOME </label>

	<div class="input-box">
		<input type="text" onchange="opConfig.reloadPrice()" value=""/>ev
	</div>
</fieldset>
<fieldset>
	<label class="required"> <em>*</em>NOME </label>

	<div class="input-box">
		<input type="text" onchange="opConfig.reloadPrice()" value=""/>ev
	</div>
</fieldset>
<fieldset>
	<label class="required"> <em>*</em>NOME </label>

	<div class="input-box">
		<input type="text" onchange="opConfig.reloadPrice()" value=""/>ev
	</div>
</fieldset>
<fieldset>
	<label class="required"> <em>*</em>NOME </label>

	<div class="input-box">
		<input type="text" onchange="opConfig.reloadPrice()" value=""/>ev
	</div>
</fieldset>


</body>
</html>

JonatanMachado · Março 7, 2013

Obrigado William Bruno

E que eu to alterando algumas coisas do magento os td dd são gerado automaticamente não sei se e possível alterar mais eu vou tentar aqui.

Teria como deixar o primeiro nome aparecer quando carrega a pagina se eu quiser dois eu aperto o + se quiser mais so i apertando o +

William Bruno · Março 7, 2013

tem sim cara, no caso basta adicionar isso aqui no script:

alteraClassName( fieldsets, 'inv' );
document.getElementsByTagName('fieldset')[0].style.display = 'block';//mostrar o primeiro

e a o contador, vai começar do 1, e não mais do zero.

JonatanMachado · Março 7, 2013

Ok deu certo xD mais quando eu clico no + na primeira vez não acontece nada so se eu clicar duas vezes pra aparecer o novo campo

William Bruno · Março 7, 2013

vc leu oq eu disse ? vc tem q iniciar o contador do 1, e não mais do zero.

JonatanMachado · Março 7, 2013

Foi mal xD agora sim perfeito

E pra ocultar seria parecido?

Tipo para o cliente apareser um botao com + -

eu vou tentar fazer aqui

eassim?

var i = 1;
var alteraClassName = function( arr, name ){
	for( var i=0; i<arr.length; i++ ){
		arr[i].className = name;
	}
}
window.onload = function(){	
	var fieldsets = document.getElementsByTagName('fieldset');

	alteraClassName( fieldsets, 'inv' );
document.getElementsByTagName('fieldset')[0].style.display = 'block';


	document.getElementById('aparece').onclick = function(){
		fieldsets[i].style.display = 'block';
		i++;
	}
	document.getElementById('olcuta').onclick = function(){
		fieldsets[i].style.display = 'none';
		i--;
	}
}

Arquivado

Adicionando class css via JS

Recommended Posts

JonatanMachado 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

matthee 3

Compartilhar este post

Link para o post

Compartilhar em outros sites

JonatanMachado 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

JonatanMachado 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

JonatanMachado 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

JonatanMachado 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Fixar div até atingir uma certa altura

Ajuda com Extends e envio para o banco

PHP+Codeginiter - Orientação para Impressão

Fóruns

Tempo Real

Informação importante