Question

我有2个按钮，一个用于vimeo，一个用于youtube。这些按钮通过从右到左的动作切换2个视频。

我想在显示youtube视频时显示（更改颜色）youtube按钮（marginLeft：'0'），并在显示vimeo视频时显示vimeo按钮（marginLeft：' - 1000px'）。

我尝试使用if else语句，但没有任何工作了。

感谢您的帮助。

JQuery的：

$(document).ready(function(){

$('#vimeo_player_button').click(function(){
    $('#youtube_player').animate({
        marginLeft: '-1000px'
    });
});

$('#youtube_player_button').click(function(){
    $('#youtube_player').animate({
        marginLeft: '0'
    });
});    

var youtube = $('#youtube_player').animate({marginLeft: '0'});

if ('#youtube_player' = youtube) {
    $('#youtube_player_button').css('background-color': 'rgb(0, 0, 250)')
} else{
    $('#vimeo_player_button').css('background-color': 'rgb(0, 0, 250)')
};

});

Answer 1

我的建议是在你的css中添加一个active课程：

.active {
    background-color: rgb(0, 0, 250);        
}

然后将active类添加到单击的按钮，并从其他按钮中删除此类：

$('#vimeo_player_button').click(function(){
    $('#youtube_player').animate({
        marginLeft: '-1000px'
    });
    $('.active').removeClass('active');
    $(this).addClass('active');
});

$('#youtube_player_button').click(function(){
    $('#youtube_player').animate({
        marginLeft: '0'
    });
    $('.active').removeClass('active');
    $(this).addClass('active');
});

<强> Updated Fiddle

Answer 2

当你打算使用assignment operator时，使用了comparison operator，将选择器作为字符串与jQuery对象进行比较是没有意义的：

if ('#youtube_player' = youtube) {

此外，由于您只使用jQuery更改了一个CSS property，因此请将其与,而不是:

分开

if ('#youtube_player' = youtube) {
    $('#youtube_player_button').css('background-color', 'rgb(0, 0, 250)')
} else{
    $('#vimeo_player_button').css('background-color', 'rgb(0, 0, 250)')
};

最后，你应该做A. Wolff在评论中所说的内容，并且只需要在单击按钮时添加一个类。

Answer 3

看看这个jsfiddle http://jsfiddle.net/Vrxv9/10/

我在这里做的是

在youtube按钮上添加了有效课程
在所选按钮上应用活动课
删除了hove效果（可选）

代码

$(document).ready(function(){

    // intialization
     $('#youtube_player_button').addClass("active");

    $('#vimeo_player_button').click(function(){
        $('#youtube_player').animate({
            marginLeft: '-1000px'
        },1000,function(){
            $('#youtube_player_button').removeClass("active");
            $('#vimeo_player_button').removeClass("active");
            $('#vimeo_player_button').addClass("active");
        }); 

    });

    $('#youtube_player_button').click(function(){
        $('#youtube_player').animate({
            marginLeft: '0'
       },1000,function(){
            $('#vimeo_player_button').removeClass("active");
            $('#vimeo_player_button').removeClass("active");
            $('#youtube_player_button').addClass("active");
        });
    });    

});

if if语句用于改变css中的颜色

3 个答案: