1

jQueryでクラスを置き換えるにはどうしたらよいでしょうか。

1秒後にclass="n1"がclass="n10"に変更
1秒後にclass="n2"がclass="n1"に変更
2秒後にclass="n3"がclass="n2"に変更
3秒後にclass="n4"がclass="n3"に変更
4秒後にclass="n5"がclass="n4"に変更
5秒後にclass="n6"がclass="n5"に変更
6秒後にclass="n7"がclass="n6"に変更
7秒後にclass="n8"がclass="n7"に変更
8秒後にclass="n9"がclass="n8"に変更
9秒後にclass="n10"がclass="n9"に変更
10秒後は1秒後からの繰り返しです。

あらかじめcssでは、n1~n10の座標(position)を指定していますので、1秒ごとに移動するイメージです。
classは、n10迄、計10個ある為、jQueryでcssの位置を設定するのではなく、クラス名を変更したく以下、試しに書いてみても移動せず。ご教示お願いいたします。

$(function(){
    $(".n2")
    setTimeout(function(){
        $('.n2').toggleClass('n1');
    },3000);
});

■追記です。
class="n1"だけ1秒停止はどのように書いたらよいでしょうか。gochoさまのサンプルを使わせていただき、変数classNameListを入れてみましたが、以下では動きませんでした。stopの定義?関数の設定がわかりません。

if (classNameList='n1'){
    setTimeout( 'stop',1000 );
}

3 件の回答 3

1

classNameの変更操作とclassNameによるノード選択を逐次的に行うと、処理前のノードと処理後のノードが混ざってしまってうまくいかないと思います
一旦classNameを変更したいノード群を変数に格納することをお勧めします

実装例:

(function() {
  var $wrapper = $('.wrapper')
  var classNameList = [
    'n1', 'n2', 'n3', 'n4', 'n5',
    'n6', 'n7', 'n8', 'n9'
  ];
  setInterval(function() {
    // classNameの変更によってquerySelectorの結果が変わらないように、querySelectorの結果を保持
    var nodes = classNameList.map(function(className) {
      return {
        className: className,
        $node: $wrapper.find('.' + className)
      };
    });
    nodes.forEach(function(current, currentIndex, whole) {
      var nextIndex = (currentIndex === whole.length - 1) ? 0 : currentIndex + 1;
      current.$node.removeClass(current.className);
      current.$node.addClass(whole[nextIndex].className);
    });
  }, 1000);
})();
.something {
  width: 30px;
  height: 30px;
  float: left;
}

.n1 {
  background-color: #EDF
}

.n2 {
  background-color: #FED
}

.n3 {
  background-color: #DFE
}

.n4 {
  background-color: #EFD
}

.n5 {
  background-color: #DEF
}

.n6 {
  background-color: #FDE
}

.n7 {
  background-color: #DEF
}

.n8 {
  background-color: #FDE
}

.n9 {
  background-color: #EFD
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div class="wrapper">
  <div class="something n1"></div>
  <div class="something n2"></div>
  <div class="something n3"></div>
  <div class="something n4"></div>
  <div class="something n5"></div>
  <div class="something n6"></div>
  <div class="something n7"></div>
  <div class="something n8"></div>
  <div class="something n9"></div>
</div>

3
  • 画像に置き換えてやってみたら出来ました。ありがとうございました!!
    – kapimako
    2015年5月29日 9:13
  • すばらしいサンプルありがとうございます。サンプルは横1列ですが、縦に少し重ねて配置するスライドショーを想定しています。手前がclass="n1"の場合、n1を1秒停止後、スライドを再開するにはどのようにしたらよいでしょうか。setInterval(1秒ごと)とは別に、新たに関数を設けたらよいのか?n1だけ1秒停止の書き方がよく分らず…どこに入れたらよいのか教えて頂けますでしょうか。
    – kapimako
    2015年5月30日 14:21
  • class="n1"だけ1秒停止はどのように書いたらよいでしょうか。 if (classNameList='n1'){ setTimeout( 'stop',1000 ); }
    – kapimako
    2015年5月30日 15:00
0

以下の2つの機能を実現したいということで良いでしょうか。

  • 1秒ごとに指定のクラスを全て順次入れ替えていく
  • n9→n8のように、nから始まるCSSのクラスから 1を引いたクラス名に置き換える

これでしたら以下のコードを参考にしてください。

$(document).ready(function() {
    var cnt = 0;

    // 繰り返し処理
    ( function loop() {
        if ( cnt <= 10 ) {
            // クラス名の置き換えを実施
            replacer();

            // 1秒後に自身(loop)をコール
            setTimeout( loop , 1000 );
        }

        cnt += 1;
    })();
});

/** 置き換えるCSSクラス名の接頭辞 */
var target = "n";

/**
 * クラスの置き換え処理。
 */
var replacer = function() {
    // 前方一致で、div要素のクラス名が 変数target で始まるものを全て抽出する
    $.each($("div[class^=" + target + "]") , function() {

        // 取り出したクラス名を取得
        var name = $(this).attr('class');
        var len = target.length;

        // クラス名を置き換え後の名前を決める。n8→n7に。
        var toName = name.substring(0,len) + ( name.substring(len) - 1);

        // 旧クラス名を削除→置き換え後のクラス名に置き換える。
        $(this).removeClass( name ).addClass( toName );
    });
};

toggleClass()は、指定したクラスがない場合は削除、あった場合は追加する機能です。

なお、このコードは最低限の動作確認をしただけのコードですので、以下には対応していません。

  • n10など、数字の部分が2桁以上
  • 他にnから始まるdivがあった場合も変換してしまう
1
  • サンプルありがとうございます。説明が1つ1つ分かりやすかったのですが、n2から動かないようなのです。
    – kapimako
    2015年5月30日 14:33
0

次の様な感じでいいかと思います。

$(function(){
    var i = 1;//開始の番号
    setInterval(function(){
        var next_i = (i==1) ? 10 : i-1;//10は最大の番号
        $(".n" + i).toggleClass("n" + next_i).toggleClass("n" + i);
        ++i;
    }, 1000);
}); 
6
  • やってみた所、class="n2"になるとn1が消え、n3になるとn2,n1が消えてしまうようです。
    – kapimako
    2015年5月29日 9:16
  • @kapimako n2になるとn3が消える(置き換える)ですよね?消えないと スタイルが重複する(class="n1 n2 n3...n10"になって全て同じになる・)と思いますが・・
    – BLUEPIXY
    2015年5月29日 9:18
  • @kapimako クラス付け全体がシフトするようなイメージでしょうか?そうだとすると質問での動作説明が違っていると思いますが・
    – BLUEPIXY
    2015年5月29日 9:26
  • すみません、質問の説明不足でした。ループしているイメージが1秒ずつclassが置き換わって座標が変わるイメージです。
    – kapimako
    2015年5月29日 9:57
  • 動作説明が変更されたので修正してみましたが、(gochoさんが指摘しているちゃんと動かない理由が正しいなら)おそらく動作説明がイメージと異なるのだと思います。
    – BLUEPIXY
    2015年5月29日 10:06

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。