Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
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
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
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"></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>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 +
tem sim cara, no caso basta adicionar isso aqui no script:
alteraClassName( fieldsets, 'inv' );
document.getElementsByTagName('fieldset')[0].style.display = 'block';//mostrar o primeiroe a o contador, vai começar do 1, e não mais do zero.
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
vc leu oq eu disse ? vc tem q iniciar o contador do 1, e não mais do zero.
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--;
}
}
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";