質問編集履歴

2 試したことの詳細追加

KotaroImai

KotaroImai score 6

2017/09/15 20:32  投稿

【jQuery】3つのdiv要素に一つのクラス名を順番に与えていく
###【jQuery】3つのdiv要素に一つのクラス名を順番に与えていく
step_boxというクラス名を与えた3つのdiv要素に、selectというクラス名を3秒間ごとに順番に付与したいです。selectクラスを付与した要素はボーダーで囲もうと考えています。
一つ目のdiv要素にselectを与えた3秒後に、一つ目のdiv要素からselectを取り除き、二つ目のdiv要素にselectを与えるといったイメージです。
###試したこと
setIntervalを使おうと思ったのですが、初心者のため書き方がわからず、うまくできませんでした。  
```jQuery  
$(function () {  
   var slide = function () {  
       $(".step_box:not(.select)").hide();  
       $(".step_box.select").fadeOut('fast', function () {  
           $(this).removeClass('select');  
           if ($(this).next('.step_box').length === 1) {  
               $(this).next('.step_box').fadeIn('fast').addClass('select');  
           } else {  
               $(".step_box:first").fadeIn('fast').addClass('select');  
           }  
       });  
   };  
   setInterval(slide, 3000);  
});  
```  
 
```html  
<div class="step_box select">  
      <span>1</span><p>テスト1</p>  
</div>  
<div class="step_box">  
      <span>2</span><p>テスト2</p>  
</div>  
<div class="step_box">  
      <span>3</span><p>テスト3</p>  
</div>  
 
```  
 
現状上記コードで動くのですがfadein等が書かれているため、selectクラスが付与されていない要素は消えてしまいます。どの要素も消えず、select要素があるもののみボーダーのスタイルが反映されるとしたいです。  
どうぞよろしくお願いいたします。
  • HTML

    14203 questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • CSS

    9497 questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

  • jQuery

    9556 questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

1 具体的な目標を追記

KotaroImai

KotaroImai score 6

2017/09/15 19:47  投稿

【jQuery】3つのdiv要素に一つのクラス名を順番に与えていく
###【jQuery】3つのdiv要素に一つのクラス名を順番に与えていく
step_boxというクラス名を与えた3つのdiv要素に、selectというクラス名を3秒間ごとに順番に付与したいです。
step_boxというクラス名を与えた3つのdiv要素に、selectというクラス名を3秒間ごとに順番に付与したいです。selectクラスを付与した要素はボーダーで囲もうと考えています。
一つ目のdiv要素にselectを与えた3秒後に、一つ目のdiv要素からselectを取り除き、二つ目のdiv要素にselectを与えるといったイメージです。
###試したこと
setIntervalを使おうと思ったのですが、初心者のため書き方がわからず、うまくできませんでした。
どうぞよろしくお願いいたします。
  • HTML

    14203 questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • CSS

    9497 questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

  • jQuery

    9556 questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る