attr（）でJqueryコードを簡略化しますか？

Question

異なる車種のスライダーをコーディングしています。

ここでは、すべてのクラスとIDを対象とするコードをセットアップしましたが、これを行う方法はもっと短くする必要がありますか？ここで

私の繰り返しのjQueryコードのサンプル：これを短縮する方法は

$("a.id-159").on('click', function() { 
    $('.car').find('.carBox.active').fadeOut(200); 
    $('.ui-carousel').find('a.active').removeClass("active"); 
    $("a.id-159").addClass("active"); 
    $('#id-159').fadeIn(1000).addClass("active"); 
}); 

$("a.giulietta").on('click', function() { 
    $('.car').find('.carBox.active').fadeOut(200); 
    $('.ui-carousel').find('a.active').removeClass("active"); 
    $("a.giulietta").addClass("active"); 
    $('#giulietta').fadeIn(1000).addClass("active"); 
}); 

マイHTML

<div id="carouselslider"> 
<div id="carousel"> 


     <a class="mito-qv" ><img src="tl_files/motorvillage/images/inhalte/NEUEWAGEN/alfa-romeo/thumb/MiToQV_thumb.jpg" alt="MiTo QV" width="150" height="107" /> 
     <span>MiTo QV</span></a> 


     <a class="giulietta" ><img src="tl_files/motorvillage/images/inhalte/NEUEWAGEN/alfa-romeo/thumb/Giulietta_thumb.jpg" alt="Giulietta" width="150" height="107" /> 
     <span>Giulietta</span></a> 


     <a class="id-159" ><img src="tl_files/motorvillage/images/inhalte/NEUEWAGEN/alfa-romeo/thumb/159MY_thumb.jpg" alt="159" width="150" height="107" /> 
     <span>159</span></a> 


     <a class="id-159sw" ><img src="tl_files/motorvillage/images/inhalte/NEUEWAGEN/alfa-romeo/thumb/159STWI_thumb.jpg" alt="159SW" width="150" height="107" /> 
     <span>159SW</span></a> 


     <a class="id-8c" ><img src="tl_files/motorvillage/images/inhalte/NEUEWAGEN/alfa-romeo/thumb/8C_Spider_thumb.jpg" alt="8C" width="150" height="107" /> 
     <span>8C</span></a> 


</div> 
<a href="#" id="ui-carousel-next"><span>next</span></a> 
<a href="#" id="ui-carousel-prev"><span>prev</span></a> 

ありますか？

あなたの助けにはThx！

Grのロジェ

あなたの入力をありがとう！

$("#carousel").children("a").on('click', function() { 
    $('.car').find('.carBox.active').fadeOut(200); 
    $('.ui-carousel').find('a.active').removeClass("active"); 
    var h = $(this).attr('class'); 
    $('#'+h).fadeIn(1000).addClass("active"); 
    $(this).addClass("active"); 
}); 

そして、それはこれがそれを短縮する方法かもしれ

Answer 1

:-)完璧に動作します：

$("#carousel").children("a").on('click', function() { 
    $('.car').find('.carBox.active').fadeOut(200); 
    $('.ui-carousel').find('a.active').removeClass("active"); 
    $(this).addClass("active"); 
    $(this).fadeIn(1000).addClass("active"); 
}); 

Answer 2

経由組み合わせるセレクタにより、これを試してみてください、私はこれまでさまざまな入力を組み合わせている ,。

$("a.id-159, a.giulietta").on('click', function() { 
    $('.car').find('.carBox.active').fadeOut(200); 
    $('.ui-carousel').find('a.active').removeClass("active"); 

    if ($(this).hasClass('id-159')) { 
     $('#id-159').fadeIn(1000).addClass("active"); 
     $("a.id-159").addClass("active"); 
    } 
    else { 
     $("a.giulietta").addClass("active"); 
     $('#giulietta').fadeIn(1000).addClass("active"); 
    } 
}); 

Answer 3

$("a.id-159, a.giulietta").on('click', function() { 
    $('.car').find('.carBox.active').fadeOut(200); 
    $('.ui-carousel').find('a.active').removeClass("active"); 
    $(this).addClass("active"); 
    var h = $(this).attr('class').replace(/^.*(id-159|giulietta).*$/, "$1"); 
    $('#'+h).fadeIn(1000).addClass("active"); 
});