Question

我有一个曲目列表，当您点击一个曲目时，播放器会展开，并且会在悬停背景颜色中选择曲目。这样可以正常工作，但是当单击另一个轨道时，它不会从旧轨道中删除悬停背景颜色。这是我正在使用的代码，这是一个测试链接：http://shacktown.com

$(document).ready(function(){
        $(".track").click(function(){
            if ( $(this).find('.trackPlayer').is(':hidden') ) {
                $('.trackPlayer').slideUp();
                $('.trackPlayer').css('background-color', '#331100');
                $(this).css('background-color', '#997766');
                $(this).find('.trackPlayer').slideDown();
            }
        });
    });

Answer 1

$(document).ready(function(){
    $(".track").click(function(){
        if ( $(this).find('.trackPlayer').is(':hidden') ) {
            //removing color from prev. track
            $(".selectedTrack").css('background-color', '#defaultcolorgoeshere').removeClass("selectedTrack");
            $('.trackPlayer').slideUp();
            $('.trackPlayer').css('background-color', '#331100');
            $(this).css('background-color', '#997766');
            $(this).addClass("selectedTrack");
            $(this).find('.trackPlayer').slideDown();
        }
    });
});

Answer 2

我认为你可以简化你的代码。首先，使用类来应用样式使代码更易于维护和读取。在使用jQuery方法时，您还可以使用链接。它提高了性能。我就是这样做的：

$(document).ready(function () {
    $(".track").click(function () {
        if ($(this).find('.trackPlayer').is(':hidden')) {
            // remove styles and hide the trackPlayer from the activeTrack
            $('.activeTrack').removeClass('activeTrack').find('.trackPlayer').slideUp();

            // apply styles and show the trackPlayer to the clicked track
            $(this).addClass('activeTrack').find('.trackPlayer').slideDown();
        }
    });
});

CSS：

.trackPlayer {
    display:none;
    background-color: #331100;
}
.activeTrack {
    background-color: #997766;
}

小提琴：http://jsfiddle.net/tah11u11/1/

在jquery .click（）事件后重置背景颜色

2 个答案: