Idea to Code

アイデアをコードへ
独学でプログラミング関係にいろいろ手を出すサイト

hawk

JavaScript

JavaScriptでコンテンツ切り替えその２2015/11/17

JavaScriptでコンテンツ切り替えを改良してみた。


表示切替の基本の仕組みは同じ。

■HTML上からコンテンツごとのID(p1など)を不要に変更。

■クロージャで保持する変数contsにdiv群を追加。

　ID：contの直下のdiv要素を切り替えるコンテンツとしている。

■クロージャ生成関数の中で局所関数dispNextを生成。

　生成時に一度呼び出すために、直接return文に付ける形ではなく宣言の形で実装。

※要jQuery


【動作確認】

1つ目のコンテンツ

p1p1p1p1p1p1p1

2つ目のコンテンツ

p2p2p2p2p2p2p2p2

3つ目のコンテンツ

p3p3p3p3p3p3p3p3


HTML.txt HTML.txt 
<div id="cont">
  <div>
    <p>1つ目のコンテンツ</p>
    <p>p1p1p1p1p1p1p1</p>
  </div>
  <div>
    <p>2つ目のコンテンツ</p>
    <p>p2p2p2p2p2p2p2p2</p>
  </div>
  <div>
    <p>3つ目のコンテンツ</p>
    <p>p3p3p3p3p3p3p3p3</p>
  </div>
</div>
<br>
<input type="button" value="切り替え" id="changeButton" />
hide.css hide.css 
.hide {
  display : none;
}
change.js 
$(function(){
  $("#changeButton").click(
    (function(){
      var nextCont = 0;
      var conts = $("#cont > div")

      function dispNext(){
        if(nextCont >= conts.length)
          nextCont = 0;
        
        conts.addClass("hide");
        conts.eq(nextCont).removeClass("hide");
        nextCont++;
      }
      
      dispNext();
      
      return dispNext;
    })()
  );
});