2

次のような 3 つのボタン (スパン) があります。

<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 つのスパン (ボタン) ごとに 1 回クリックすると機能しますが、その後は 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 に答える