2

我有三个按钮（跨度），如下所示：

<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...

谢谢

4

1 回答 1

2

在您的帖子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中检查控制台

于 2013-09-15T18:03:08.917 回答