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>

有没有办法缩短这个？

谢谢你的帮助！

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

它完美无缺： - ）

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

使用attr（）简化Jquery代码？

3 个答案: