JQuery - Otimizar Código

[Vinicius Cainelli 17]

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(); });

[William Bruno 1501]

dependo do html para te dizer como melhorar esse código ai. Poste o html.

[Henrique Barcelos 290]

Crie um atributo class comum para todos esses elementos e faça:

jQuery('.<nome_da_classe>').click(function(){
$(this).fadeIn();
});

[Vinicius Cainelli 17]

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 -->

[Thiago Duarte 23]

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>

[Bru_ce 53]

Faça conforme dica do Henrique Barcelos,

[William Bruno 1501]

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.