使用 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");
});

我的网页

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

它工作得很好：-）

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