9

ここで SO に関するいくつかの投稿を見てきましたが、それらは機能と構造があまりにも具体的であり、私が探しているのは、私または誰でもどこでも使用できるより普遍的なものです。

必要なのは、クリックすると3 つのクラスを切り替えることができるボタンを持つことだけです。ただし、4、5、またはそれ以上のクラスを循環する必要がある場合は、スクリプトを簡単にスケーリングできます。

この時点で、基本的にはサイクリングよりも「トグル」である 2 つのクラス間を「循環」できるので、そのために次のことを行います。

HTML:

<a href="#" class="toggle">Toggle classes</a>
<div class="class1">...</div>

jQuery:

$('.toggle').click(function () {
  $('div').toggleClass('class1 class2');
});

これは、これの簡単なフィドルです。

さて、メソッドに 3 番目のクラスを追加するとうまくいくと思いますが、そうではありません。

$('div').toggleClass('class1 class2 class3');

class1何が起こるかというと、とclass3のみの​​間でトグルが起こり始めます。

だから、これが私が最初の問題を抱えているところです.Toggleボタンを3つのクラスで順番に循環させるにはどうすればよいですか?

そして、誰かが 4 つ、5 つ、またはそれ以上のクラスにサイクリングする必要がある場合はどうしますか?

4

8 に答える 8

33

あなたはこれを行うことができます ：

$('.toggle').click(function () {
  var classes = ['class1','class2','class3'];
  $('div').each(function(){
    this.className = classes[($.inArray(this.className, classes)+1)%classes.length];
  });
});

デモンストレーション

于 2013-01-07T17:26:18.980 に答える
6

別のアプローチを次に示します。

if ($(this).hasClass('one')) {
    $(this).removeClass('one').addClass('two');
} else if ($(this).hasClass('two')) {
    $(this).removeClass('two').addClass('three');
} else if ($(this).hasClass('three')) {
    $(this).removeClass('three').addClass('one');
}
于 2014-02-25T23:02:50.943 に答える
4 
var classes = ['class1', 'class2', 'class3'],
    currentClass = 0;

$('.toggle').click(function () {

    $('div').removeClass(classes[currentClass]);

    if (currentClass + 1 < classes.length)
    {
        currentClass += 1;
    }
    else
    {
        currentClass = 0;
    }

    $('div').addClass(classes[currentClass]);

});

そのようなものは問題なく動作するはずです:)

Tinker IO リンク - https://tinker.io/1048b

于 2013-01-07T17:25:12.570 に答える