現在表示されているコンテンツにクラスを付与したいのですが、どう記述すれば良いのでしょうか

Question

▼やりたい事
http://blog.beat8.info/samples/13091801.html
（参照ページ）
↑ナビ（li ）ではなく、表示されているコンテンツ（box）にクラスを付けたい。

▼試した事
下記ページ【navカレント表示】の箇所を参照して
http://blog.beat8.info/jquery/53/
下記書き換え
「.nav li a」→「.box」
「.nav li:nth-child」→「.box:nth-of-type」

▼結果
途中まではきちんと表示されているコンテンツに、クラスが付与されていたが
途中から表示されていないコンテンツにクラスが付与されたりと上手く動作しなかった

所々何が書いてあるのかも良くわからない状態で何が不要で何が不足しているのかさっぱり解らない状態です。。
すみませんがどなたかご教示お願いいたします。

＝＝下記追記＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
実際に記述したソース

▼html

<div class="contentsBox">
<div class="box current">割愛</div>
<div class="box">割愛</div>
<div class="box">割愛</div>
</div>

.boxは全部で10個あります。

▼js

$(function() {
	//カレント表示
	var box = new Array;
	var current = -1;
	$(".contentsBox .box").each(function(i) {
		box[i] = $(this).offset().top;
	});

	// カレント表示の変更
	function changeBox(secNum) {
		if (secNum != current) {
			current = secNum;
			secNum2 = secNum + 1;
			$(".contentsBox .box").removeClass("current");
			$(".contentsBox .box:nth-of-type(" + secNum2 +")").addClass("current");
		}
	}

	// scroll量での判定
	function scrollCheck() {
		var st = $(window).scrollTop() + 30;
		for (var i = box.length - 1 ; i >= 0; i--) {
			if (st > box[i]) {
				changeBox(i);
				break;
			}
		};

	}
	
	// scrollでのカレント表示をbind
	$(window).bind("load scroll", scrollCheck);
	
});

Comments

[masayoshi0222]

あなたが書いたソースコードがどれかわかるように追記して頂くと返答しやすいです。

[banbbanb0814]

すみません！！ありがとうございます。追記したのでご確認お願いいたします。

[kei344]

質問文のコードはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

[banbbanb0814]

ご指摘ありがとうございます！！初めての投稿で知らないことばかりなのでとても助かります！

Answer 1

うーん、クラスは「box」というクラスがついているので、
やりたいことは「boxクラスに色替えなどの効果をつけたい」ということですかね？
（画面外にあるboxの色替えをしても、あまり面白くないんじゃないかなぁ…）

参考にされているサイトでは、
マウスオーバーした部分の色替えを行っているのでCSSでいけますが、
もし上記のような「左のメニューをマウスオーバーしたら、右のコンテンツの色を変えたい」
などということでありましたら、
liとboxのひとつひとつにidをつけることと、
jQueryなどJavascriptの知識が必要になりますが、大丈夫でしょうか。

というのは質問の内容から、かなりの初学者とお見受けしまして、
ちょっと頭の中で実現方法を組み立ててみたのですが、
初心者にこれわかるかなぁ、というような代物になったためで。

考え方としては
0. 任意のliにマウスオーバーする（Mouseoverイベント発生）
0. 対応するidのboxの色を変更する

という流れになり、これをboxの数だけ
Javascriptで用意することになります。
（変数でサボることも可能ですが、さらに混乱を招くといけないので）
Javascript使ってみよう、という勇気をお持ちでしたら、お声がけください。

追記----------------
コード見ました。
うーん、やはりこのJavascript全体で何をしているか、よくお分かりになってないんじゃないかな…
と思います。
ざっくり言うと左のナビボタンを押すと画面がスクロールして、対応する部分に飛ぶというJavascriptですが
これを書き換えても（ナビボタンの数を増やすとかでなければ）あまり良いことは起こらないと思いますが…
少なくともこのJavascriptでは色は変わりませんが、ナビボタンを消したいとかですか？
何を実現したいのかがよくわからなくなってきました。

追記（20170519）----------------
ごく簡単に、jQueryで再現できるかな？と思ったので（試してませんが）書いてみました。
「前へ」ボタンのid = mae、「次へ」ボタンのid = tsugi、
右コンテンツのid = contents　、
右コンテンツの中身の高さ = 100pixel (ちっちゃ)の設定となっております。

// 右コンテンツの高さを取得
  var currentheight = #contents.scrollTop();

// 「前へ」ボタンの設定
  $('#mae').click(function(){
  #contents.scrollTop(currentheight - 100);
});

// 「次へ」ボタンの設定
  $('#tsugi').click(function(){
  #contents.scrollTop(currentheight + 100);
});

これで、先頭のコンテンツを参照しているときは「前へ」ボタンを、
最後のコンテンツを参照しているときは「次へ」ボタンを
.hiddenプロパティで隠せばそれなりに見えるのではないかなと。

試していないので動かなかったらごめんなさい。
「思ってたのと違う」という苦情は受け付けますので…

Comments

[banbbanb0814]

ご回答ありがとうございます！
そうなんです。。恥ずかしながらjsの知識が乏してく大変苦戦しております。。
実際にやりたいことは表示されているコンテンツに連動して「前へ／次へ」ボタンのリンクを変更させたいのです。
少ない知識のなか絞りだしたのが、
表示させているコンテンツに対して.next()と.prev()を指定して、前後のコンテンツのidを.attr()で書き換えたらどうか・・・というものでした。

もっと適切な方法があればご教示いただきたいです。。。

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

[nora_kuragen]

そうすると、左側に出ているのはサンプルのようなナビボタンではなくて、
「前へ」「次へ」の2つのボタンだけ、という理解で良いでしょうか？
で、右のコンテンツがそれに対応して1つずつ繰り上がったり繰り下がったりする。
実現されたいことがつかめてきたようです。
IDの指定に変数使った方が楽なのではないかな、というのがコメントを読んだ第一印象ですが…
私なりの回答をまとめて、また書き込みます。

[banbbanb0814]

追記確認いたしました！
ありがとうございます！
こちらも試してみます！！

Answer 2

今回つまずいていた不具合はページ内にて画像が使用されていたのでoffset()の値がうまく取得できていなかったのが原因でした。全て読み込んでから作動するように設定しなおしたら問題なく動くようになりました。
ご回答いただいた方、ありがとうございましたm(__)m

Answer 3

http://jsdo.it/masayoshi/IHW4

こちらにやりたいことを記述しておきました。
参考にしてみてください。

Comments

[banbbanb0814]

ありがとうございます！！
こちらで明日試してみます！！

[banbbanb0814]

昨日はありがとうございました！
こちらで試して見たのですが、やはり途中でクラスを付けたいコンテンツがずれてしまいました。。。
ただズレてしまうのは、androidのクロムでベージのリロードをかけた時のみです。他（iphoneのSafari、PC、androidの標準ブラウザ）のは大丈夫でした。
（iphoneのクロムは検証し忘れました。。後ほど検証してみます。）
また、androidのクロムでもベージをリロードしなければ、きちんと機能しました。
何が原因なのかよくわからず。。。
別途追従ナビをセットしているのですが、そちらも同環境配下でタイミングがズレてしまいます。
スクロール系のメソッドがいけないのでしょうか？？

ぜひご教示いただければと思います。
すみませんが、どうぞよろしくお願いいたします。

[masayoshi0222]

新しいソースコードの提示をお願いいたします。
変更になった内容を確認してみないとご返答は難しいです。

[banbbanb0814]

ご連絡おそくなってしまいすみません。。
こちらですがあの後すぐ解決いたしました。
いろいろと教えていただきありがとございましたm(__)m

Answer 4

// カレント表示の変更 
function changeBox(secNum) { 
   if (secNum != current) { 
      current = secNum; 
      secNum2 = secNum + 1; 
      calendar.removeClass("current"); 
      $(".contentsBox .box:nth-of-type(" + secNum2 +")").addClass("current"); 
   } 
}

いきなりcalenderが出てきてますが、これはどこで定義しているのでしょうか？
removeClass("current")はcurrentクラスを削除するという関数になります。
どこかのソースのコピペでcalenderと記述しているのでしたら、そこを適切なものに書き換えてあげるとやりたいことができるようになるんじゃないかと思われます。