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个动作 - ＆gt;

<span id="size_600">

必须获得一个“活动”类+删除其他2个跨度上的“活动”类，如果它们之前被单击，然后将一个类添加到OTHER div并删除与其他2个跨度相关的其他类... < / p>

我所做的描述可能看起来令人困惑，但这里是我写的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

中查看控制台

三个按钮（span's），jQuery IF点击，addClass - removeClass

1 个答案: