0

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

これで、すべてのクラスと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 Rogier

ご入力いただきありがとうございます。私はこれに異なる入力を組み合わせました：

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

そしてそれは完璧に動作します:-)

4

3 に答える 3

0

これはそれを短くする方法かもしれません：

$("#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");
});
于 2012-05-08T07:53:59.457 に答える
0

を介してセレクターを組み合わせて、これを試してください,。

$("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");
    }
});
于 2012-05-08T07:54:36.647 に答える
0 
$("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");
});
于 2012-05-08T08:19:12.733 に答える