1

3つのcssクラスとデフォルトのクラスを追加/削除したいと思います。例：最初のアンカーをクリックすると、style1という新しいクラスが追加され、デフォルトのスタイルが削除されます。2番目のアンカーをクリックすると、style1が削除され、style2が追加されます。これは、anchor3でも同じです。

問題は、anchor3をクリックして開始しても何も起こらず、アクションを元に戻せないことです。

最初にクリックしたリンクに関係なく、クラスの追加/削除が機能するように、これを機能させるにはどうすればよいですか？3つのスタイルを使用する必要がありますが、デフォルトのスタイルも必要です。

JFiddleのコードは次のとおりです。http：//jsfiddle.net/VadUE/2/

ブラウザでは動作しますが、JFiddleでは動作しません。

コード：

$(document).ready(function() {
    $('.anchor1').click(function() {
        $('p').addClass('style1').removeClass('default');
        $('.anchor2').click(function() {
            $('p').addClass('style2').removeClass('style1');
            $('.anchor3').click(function() {
                $('p').addClass('style3').removeClass('style2');
            });
        });
    });
});


<style type="text/css">
.style1{
    color: #FF8000;
}
.style2{
    color: #F36;
}

.style3{
    color: #00F;
}

.default{
    color: #0C0;
}
</style>


<a class="anchor1" href="#/">Link1</a>
<a class="anchor2" href="#/">Link2</a>
<a class="anchor3" href="#/">Link3</a>
<p class="default">This is a sequence into a sound</p>
4

4 に答える 4

2

HTMLを少し変更します。

<a class="anchor" href="#/">Link1</a>
<a class="anchor" href="#/">Link2</a>
<a class="anchor" href="#/">Link3</a>

そして、この単純なJSコードを使用します。

$(document).ready(function() {
    $('.anchor').click(function() {
        $('p').attr('class', 'style' + ($(this).index() + 1));
    });
});​

デモ： http： //jsfiddle.net/VadUE/4/

元のコードの問題は、イベントハンドラーを奇妙にバインドしていたことでした（1つは別のハンドラーがトリガーされた後にのみバインドされます）。それらをすべて1つずつバインドする必要があります。

于 2012-10-06T07:06:29.910 に答える
1
  1. jsfiddleで、 mootoolsライブラリを選択しました。
  2. このreadyメソッドでは、すべてのクリックアクションをネストしています。
  3. クラスを削除する場合は、削除するクラス名を取得する必要があります。

これを修正すると（そしてreadyページの下部にスクリプトを配置することで呼び出しの必要がなくなります）、最終的には次のようになります。

$('.anchor1').on('click',function(){
    $('p').removeClass(function() {
          return $(this).attr('class');
        }).addClass('style1');
});
$('.anchor2').click(function(){
    $('p').removeClass(function() {
          return $(this).attr('class');
        }).addClass('style2');
});
$('.anchor3').click(function(){
    $('p').removeClass(function() {
          return $(this).attr('class');
        }).addClass('style3');
});

jsfiddleを参照してください

リンクに単一のclassNameを使用し、数値IDを追加すると、必要なハンドラーは1つだけになります。

$('.anchor').on('click',function(){
    $('p').removeClass(function() {
          return $(this).attr('class');
        }).addClass('style'+this.id);
});​

jsfiddleを参照してください

于 2012-10-06T07:17:02.623 に答える
0

問題は、最初のクリックハンドラーの内部から2番目と3番目のリンクのクリックハンドラーをバインドしていることです。これは、最初のリンクをクリックした後にのみ、2番目と3番目のリンクが機能し始めることを意味します。

あなたの現在のコード

$('.anchor1').click(function() {
    $('p').addClass('style1').removeClass('default');
    $('.anchor2').click(function() {
        $('p').addClass('style2').removeClass('style1');
        $('.anchor3').click(function() {
            $('p').addClass('style3').removeClass('style2');
        });
    });
});

に変更する必要があります

   $('.anchor1').click(function() {
        $('p').addClass('style1').removeClass('default');
    });

    $('.anchor2').click(function() {
        $('p').addClass('style2').removeClass('style1');
    });

    $('.anchor3').click(function() {
        $('p').addClass('style3').removeClass('style2');
    });
于 2012-10-06T07:04:32.390 に答える
0

間違ったバインディングを使用しています

$('.anchor1').click(function() {
        $('p').addClass('style1').removeClass('default');

}


$('.anchor2').click(function() {
        $('p').addClass('style1').removeClass('style1');

}

またはあなたが使用することができます

 $('a[class^=anchor]').click(function() {
            $('p').addClass('style'+this.id).removeClass($(this).attr("class"));

    }
于 2012-10-06T07:06:03.670 に答える