質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

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

Q&A

解決済

1回答

2415閲覧

JQueryの任意N番目の要素をクリックしたら、別要素のN番目にクラスを付与したい

退会済みユーザー

退会済みユーザー

総合スコア0

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

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

0グッド

0クリップ

投稿2018/01/13 04:54

編集2018/01/13 05:01

解決させたいことは、以下のコードでメインのスライダーinfiniteslider-list内の任意のimgのN番目の要素をクリックすると、別要素のN番目の要素.item-slider-detail内の同一数字に対してクラス付与させたいのですが、紐づけるルールとして、任意のクラス-1、任意のクラス-2などにし、数字が同じの時に、.activeなどのクラスを付与したいです。
以下のJSでクリックした要素は、確認出来ております。

ご教授いただければ幸いです。

$j('.infiniteslider li').click(function(e) { alert(e.target.className); }); <ul class="infiniteslider-list"> <li><img src="./img/slide/item_slide3.png" alt="" width="127" height="625" class="infinites-item1"></li> <li><img src="./img/slide/item_slide4.png" alt="" width="128" height="625" class="infinites-item2"></li> </ul> <div class="item-slider-detail"> <div id="detail-item1" class="item-slider-detail-layer">アイテム説明1</div> <div id="detail-item2" class="item-slider-detail-layer">アイテム説明2</div> </div>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

こんにちは。

javascript

1e.target.className

で取得したクラス名の末尾の文字を、

javascript

1文字列.slice(-1)

で取れるので、これを使って該当するIDを持つ <div> のクラスに .active を
追加すればよいと思います。

以下、参考に作りました。(画像がないので <img><span> にしています)

https://jsfiddle.net/jun68ykt/pha3p0zr/1/

item1, item2 と表示されているリストアイテムをクリックすると
該当する div の背景を赤にします。再度クリックすると、active が
外れて白に戻ります。

以上参考になれば幸いです。

投稿2018/01/13 05:16

jun68ykt

総合スコア9058

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2018/01/13 05:21

ご回答ありがとうございます。 item1をクリックし、そのあとitem2をクリックした場合にitem1のクラスを外したい場合は、.findメソッドで.activeをさがし、1回消すと大丈夫でしょうか。
退会済みユーザー

退会済みユーザー

2018/01/13 05:31

ご教授頂きましたコードに、 ).siblingsメソッドを追加し実現出来ました。 誠にありがとうございます。 $j('.infiniteslider-list li').click(function(e) { var clazz = e.target.className; var num = clazz.slice(-1); $j('#detail-item' + num).addClass('active').siblings('.active').removeClass('active'); });
jun68ykt

2018/01/13 05:37 編集

解決されたようで、よかったです!
jun68ykt

2018/01/13 07:09 編集

蛇足ではありますが、別解を考えました。 以下 https://jsfiddle.net/jun68ykt/pha3p0zr/5/ のようにすると、class や id の値の末尾に、1, 2, 3 、、という、 位置を表す数字が不要になります。 ご質問のタイトルにある、 「N番目の要素をクリックしたら、別要素のN番目に」 というのを、N がわかる class や id を設定するのではなく、 JQuery のセレクタや関数の機能でやってもらうという考え方です。 参考になれば幸いです。
退会済みユーザー

退会済みユーザー

2018/07/23 04:32

お世話になっております。 以下のコードで試しましたところ、 スマホでクリックが動作せず、thisの箇所を$('.infiniteslider-list li')にするとクリック出来るのですが、 N番目からN番目から切替わらず、苦戦しております。 $('.infiniteslider-list li').each(function(index) { $(this).on('click', function() { $('.item-slider-detail-layer:nth-child(' +(index+1) + ')') .addClass('active') .siblings('.active') .removeClass('active'); }); });
jun68ykt

2018/07/24 06:14

こんにちは。 新たな課題のご連絡、ありがとうございます。 つきましては、 > 苦戦しております。 との問題を整理して新たな質問として投稿されると、多くの回答者が見て考えてくれるので 解決が早いと思います。またその際に、問題の部分だけを切り取ったコードを作って、 jsfiddle や Codepen などに上げるとなお早期に的確な回答が望めると思います。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問