jquery - 三个按钮(span 的)，jQuery IF 单击，addClass - removeClass

Question

我有三个按钮(跨度)，如下所示:

<span id="size_default"><?php echo JText::_('VIDEO_DEFAULT');?></span>
<span id="size_450"><?php echo JText::_('VIDEO_450');?></span>
<span id="size_600"><?php echo JText::_('VIDEO_600');?></span>

这些应该像按钮一样工作，它们现在可以工作，但不正确，我需要的是，例如，当单击“size_600”时，必须发生 2 个操作 ->

<span id="size_600">

必须获得一个“事件”类+删除其他 2 个跨度上的“事件”类(如果之前被单击)，然后将一个类添加到 OTHER div 并删除与其他 2 个跨度相关的其他类...

我所做的描述可能看起来很困惑，但是这是我编写的 jQuery 代码，这样应该更清楚:

        $('size_default').addEvent('click',function(){
        $('size_default').addClass('active');
            $('youtube-player').addClass('h_355');
            $('size_450').removeClass('active');
            $('size_600').removeClass('active');
            $('youtube-player').removeClass('h_450');
            $('youtube-player').removeClass('h_600');
        });
        $('size_450').addEvent('click',function(){
        $('size_450').addClass('active');
            $('youtube-player').addClass('h_450');
            $('size_355').removeClass('active');
            $('size_600').removeClass('active');
            $('youtube-player').removeClass('h_355');
            $('youtube-player').removeClass('h_600');
        });
        $('size_600').addEvent('click',function(){
        $('size_600').addClass('active');
            $('youtube-player').addClass('h_600');
            $('size_355').removeClass('active');
            $('size_450').removeClass('active');
            $('youtube-player').removeClass('h_355');
            $('youtube-player').removeClass('h_450');
        });

目前，当您为每 3 个跨度(按钮)单击一次时，它“确实”起作用，但此后只有第一个 jQuery 代码块起作用(size_default)...

有人可以帮我解决这个问题吗？我不太擅长 jQuery...

谢谢

Answer 1

您的帖子中缺少 id="youtube-player"。

如果您正在使用 Mootools 和 jQuery 可以更安全地避免使用 Mootools $。

所以试试这个:

var all_spans = document.getElements('span#size_default,span#size_450,span#size_600');
document.id('size_default').addEvent('click', function () {
    all_spans.removeClass('active');
    this.addClass('active');
    document.id('youtube-player').removeClass('h_450').removeClass('h_600').addClass('h_355');
});
document.id('size_450').addEvent('click', function () {
    all_spans.removeClass('active');
    this.addClass('active');
    document.id('youtube-player').removeClass('h_355').removeClass('h_600').addClass('h_450');
});
document.id('size_600').addEvent('click', function () {
    all_spans.removeClass('active');
    this.addClass('active');
    document.id('youtube-player').removeClass('h_355').removeClass('h_450').addClass('h_600');
});

您可以在这个FIDDLE中查看控制台