質問編集履歴

2 試したことの詳細追加

KotaroImai score 6

2017/09/15 20:32  投稿

【jQuery】3つのdiv要素に一つのクラス名を順番に与えていく

###【jQuery】3つのdiv要素に一つのクラス名を順番に与えていく

step_boxというクラス名を与えた3つのdiv要素に、selectというクラス名を３秒間ごとに順番に付与したいです。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>テスト１</p>

</div>

<div class="step_box">

<span>2</span><p>テスト２</p>

</div>

<div class="step_box">

<span>3</span><p>テスト３</p>

</div>

```

現状上記コードで動くのですがfadein等が書かれているため、selectクラスが付与されていない要素は消えてしまいます。どの要素も消えず、select要素があるもののみボーダーのスタイルが反映されるとしたいです。

どうぞよろしくお願いいたします。

HTML 14203 questions HTMLとは、ウェブ上の文書を記述･作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像･リスト･表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。 Myタグに追加 CSS 9497 questions CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。 Myタグに追加 jQuery 9556 questions jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。 Myタグに追加

1 具体的な目標を追記

KotaroImai score 6

2017/09/15 19:47  投稿

【jQuery】3つのdiv要素に一つのクラス名を順番に与えていく

###【jQuery】3つのdiv要素に一つのクラス名を順番に与えていく

step_boxというクラス名を与えた3つのdiv要素に、selectというクラス名を３秒間ごとに順番に付与したいです。

step_boxというクラス名を与えた3つのdiv要素に、selectというクラス名を３秒間ごとに順番に付与したいです。selectクラスを付与した要素はボーダーで囲もうと考えています。

一つ目のdiv要素にselectを与えた3秒後に、一つ目のdiv要素からselectを取り除き、二つ目のdiv要素にselectを与えるといったイメージです。

###試したこと

setIntervalを使おうと思ったのですが、初心者のため書き方がわからず、うまくできませんでした。

どうぞよろしくお願いいたします。

HTML 14203 questions HTMLとは、ウェブ上の文書を記述･作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像･リスト･表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。 Myタグに追加 CSS 9497 questions CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。 Myタグに追加 jQuery 9556 questions jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。 Myタグに追加