Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Galera, alguém sabe como poderia resolver isso..
Esse código é simples, de fácil manutenção e resolve o meu problema, porém, se caso eu precisasse usar isso pra uns 100 itens, como faço pra não ter que repetir essa linha 100 vezes.
Existe alguma forma de otimizar isso?
$('#btn-item-conceito-1').click(function(){ $('#content-conceito-1').fadeIn(); });
$('#btn-item-conceito-2').click(function(){ $('#content-conceito-2').fadeIn(); });
$('#btn-item-conceito-3').click(function(){ $('#content-conceito-3').fadeIn(); });
$('#btn-item-conceito-4').click(function(){ $('#content-conceito-4').fadeIn(); });
$('#btn-item-conceito-5').click(function(){ $('#content-conceito-5').fadeIn(); });
$('#btn-item-conceito-6').click(function(){ $('#content-conceito-6').fadeIn(); });Crie um atributo class comum para todos esses elementos e faça:
jQuery('.<nome_da_classe>').click(function(){
$(this).fadeIn();
});O html é esse aqui.
<div class="conceito">
<ul class="navegacao-lateral">
<li id="btn-item-conceito-1" class="btn-item-conceito"><a>O CONCEITO</a></li>
<li id="btn-item-conceito-2" class="btn-item-conceito"><a>POOL LOUNGE</a></li>
<li id="btn-item-conceito-3" class="btn-item-conceito"><a>CONNECT LAUNDRY</a></li>
<li id="btn-item-conceito-4" class="btn-item-conceito"><a>GOURMET BY VICKYNG</a></li>
<li id="btn-item-conceito-5" class="btn-item-conceito"><a>FITNESS BY MARCOS PAULO REIS</a></li>
<li id="btn-item-conceito-6" class="btn-item-conceito last"><a>ITAMBÉ</a></li>
</ul>
<div class="content-conceito" id="content-conceito-1">
<img src="images/defalt-conceito.jpg" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="content-conceito" id="content-conceito-2">
<img src="images/defalt-conceito.jpg" alt="">
<p>2 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="content-conceito" id="content-conceito-3">
<img src="images/defalt-conceito.jpg" alt="">
<p>3 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="content-conceito" id="content-conceito-4">
<img src="images/defalt-conceito.jpg" alt="">
<p>4 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="content-conceito" id="content-conceito-5">
<img src="images/defalt-conceito.jpg" alt="">
<p>5 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="content-conceito" id="content-conceito-6">
<img src="images/defalt-conceito.jpg" alt="">
<p>6 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div><!-- /.conceito -->Faça isso
.conceito ul coloque o conteudo da class="navegacao-lateral"
ex: .conceito ul{
color:#fff;
}.conceito li coloque o conteudo da id="btn-item-conceito-1" class="btn-item-conceito"
ex: .conceito li{
font-family:arial;
}
<div class="content-conceito">
<img src="images/defalt-conceito.jpg" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>Faça conforme dica do Henrique Barcelos,
nesse teu caso, eu sugiro usar o .index() e o .eq().
assim:
jQuery('.btn-item-conceito').click(function(){
var idx = jQuery(this).index();
jQuery('.content-conceito').eq( idx ).fadeIn();
});
pronto, sem atributos extras.
dependo do html para te dizer como melhorar esse código ai. Poste o html.