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

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

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

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

スライダー

GUIのグラフィカルウィジェットのひとつです。インジケーターを動かすことで値を調節可能とします。

jQuery

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

Q&A

解決済

1回答

794閲覧

複数htmlのセレクタ指定方法

sakaih

総合スコア1

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

スライダー

GUIのグラフィカルウィジェットのひとつです。インジケーターを動かすことで値を調節可能とします。

jQuery

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

0グッド

0クリップ

投稿2021/08/26 11:34

前提・実現したいこと

ご覧頂きありがとうございます。
slickを使ったスライダーなのですが、日本語サイトと英語サイトで表示数を変更したいのでご質問させて頂きました。

・内容
日本語サイトと英語サイトで同じクラスを使用しているのですが、cssのhtml[lang="en"] *** { ** }のように
Jqueryのセレクタ指定でも言語別で内容を変更することは可能でしょうか。

下記コードでは英語サイトのsliderに.slider01enと言うクラスを付与し、二つのセレクタで指定してみたのですが
日本語、英語サイト共に上の.slider01の内容が反映されてしまいました。

なんとか.slider01のクラスは変更せず、日本語サイト、英語サイトでスライダーの表示数を変更したいです。

該当のソースコード

js

1 $('.Slider01').slick({ 2 infinite: true, 3 dots: false, 4 arrows: true, 5 autoplay: true, 6 swipe: true, 7 autoplaySpeed: 4000, 8 slidesToShow: 5, 9 slidesToScroll: 1, 10 responsive: [ 11 { 12 breakpoint: 1600, 13 settings: { 14 slidesToShow: 4, 15 slidesToScroll: 1 16 } 17 }, 18 { 19 breakpoint: 1200, 20 settings: { 21 slidesToShow: 3, 22 slidesToScroll: 1 23 } 24 }, 25 { 26 breakpoint: 767, 27 settings: { 28 slidesToShow: 2, 29 slidesToScroll: 1 30 } 31 }, 32 { 33 breakpoint: 500, 34 settings: { 35 slidesToShow: 1, 36 slidesToScroll: 1 37 } 38 } 39 ] 40 }); 41 42$('.Slider01.Slider01en').slick({ 43 infinite: true, 44 dots: false, 45 arrows: true, 46 autoplay: true, 47 swipe: true, 48 autoplaySpeed: 4000, 49 slidesToShow: 3, 50 slidesToScroll: 1, 51 responsive: [ 52 { 53 breakpoint: 1600, 54 settings: { 55 slidesToShow: 3, 56 slidesToScroll: 1 57 } 58 }, 59 { 60 breakpoint: 1200, 61 settings: { 62 slidesToShow: 3, 63 slidesToScroll: 1 64 } 65 }, 66 { 67 breakpoint: 767, 68 settings: { 69 slidesToShow: 2, 70 slidesToScroll: 1 71 } 72 }, 73 { 74 breakpoint: 500, 75 settings: { 76 slidesToShow: 1, 77 slidesToScroll: 1 78 } 79 } 80 ] 81 });

試したこと

セレクタの指定方法を調べて色々と試してみましたが行き詰ってしまったのでご質問いたしました。
お手数おかけいたしますがご教授頂けますと幸いです。
よろしくお願いいたします。

補足情報(FW/ツールのバージョンなど)

ここにより詳細な情報を記載してください。

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

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

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

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

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

m.ts10806

2021/08/26 11:38

そもそも日本語サイトと英語サイトはどのように表示切替してるのでしょうか
sakaih

2021/08/26 11:41

説明不足があり失礼いたしました。 htmlはまったく別で表示切替と言うより、別サイトになります。 CSSやJS等は共有しています。
guest

回答1

0

ベストアンサー

cssのhtml[lang="en"] * { }のように

Jqueryのセレクタ指定でも言語別で内容を変更することは可能でしょうか。

はい、$('html[lang="ja"] .Slider01')のようなセレクタも成立します。

投稿2021/08/26 11:36

maisumakun

総合スコア145208

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

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

sakaih

2021/08/26 11:50

ありがとうございます! それぞれenとjaをしていすると振り分ける事ができました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.46%

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

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

質問する

関連した質問