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>

有没有办法缩短这个？

谢谢你的帮助！

罗吉尔

感谢您的输入！我已将不同的输入组合到此：

$("#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 
$("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 回答
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 回答