編集履歴

質問編集履歴

追記内のslide.jsの記述に変更を加えました。

2021/06/03 05:21

投稿

punchan36

スコア105

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -504,11 +504,11 @@
       if (currentSlide.hasClass('firstSlide')) {
-        $('.prev-btn').hide(); // 表示されているスライドが最初のページの場合「前へ」は非表示。
+        dir.find('.prev-btn').hide(); // 表示されているスライドが最初のページの場合「前へ」は非表示。
       } else if (currentSlide.hasClass('lastSlide')) {
-        $('.next-btn').hide(); // 表示されているスライドが最後のページの場合「次へ」は非表示。
+        dir.find('.next-btn').hide(); // 表示されているスライドが最後のページの場合「次へ」は非表示。
       }

ご助言を元にしたコードを追記内に記載致しました。

2021/06/03 05:21

投稿

punchan36

スコア105

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -364,19 +364,7 @@
 ご回答を元にしたコードを追記致します。
-こちらのコードでも、質問前と同様に上手く動きませんでした。状況は以下の通りです。
-0. 「スライド1、2」に関わらず、最初にクリックしたスライドは全ての機能が上手く動く。
-0. スライドを一旦閉じもう片方のスライドをクリックすると、中身（あ, い, う, か, き, くの文字）が無い空白のページが表示される。
-0. 更には1ページ目から必ず表示される訳ではなく、先ほどのスライドを何ページ目で閉じたかに依存して途中のページから表示されたりする。
+ページの中身は独立して（他のスライドに依存する事なく）表示されるようになったものの、「←前へ　次へ→」ボタンのみまだ他のスライドでの動作と連動して表示されてしまいます。
-0. 「← 前へ」や「次へ →」ボタンを押しても相変わらずページの中身が表示されないままページ遷移だけするが、一度「ページボタン」を押せばその番号に対応したページ内容が表示され、その後であれば「← 前へ」や「次へ →」ボタンも機能するようになる。
-テストまでして頂き有難うございます。どこかコードに相違点がありますでしょうか。
@@ -508,9 +496,11 @@
     function toggleChangeBtn(dir){
+      var dir = $(this).parents('.slide-wrapper'); //対象のクラスを絞りたいが、絞れていない？
-      var currentSlide = $('.active');
+      var currentSlide = dir.find('.active'); // 表示されているスライドをcurrentSlideと名付ける。
-      $('.change-btn').show();
+      $('.change-btn').show(); // 「前へ」と「次へ」は常に表示する。
       if (currentSlide.hasClass('firstSlide')) {
@@ -526,17 +516,15 @@
-    $('.index-btn').click(function() { // ページ番号をクリックした際の動き。
+    $('.index-btn').click(function() {
+      var dir = $(this).parents('.slide-wrapper'); //対象のクラスを絞る。
-      $('.active').removeClass('active'); // .activeクラスが付いていたスライドから.activeを取り除く。
+      dir.find('.active').removeClass('active'); // 表示されていたスライドから.activeを取り除く。
       var clickedIndex = $('.index-btn').index($(this));
-      $('.slide').eq(clickedIndex).addClass('active'); // 今クリックされたページ番号と同じインデックス番号を持つスライドに.activeを付与する。
+      $('.slide').eq(clickedIndex).addClass('active'); // クリックされたページ番号と同じインデックス番号を持つスライドに.activeを付与する。
-      var dir = $(this).parents('.slide-wrapper');
       toggleChangeBtn(dir);
@@ -544,28 +532,26 @@
-    $('.change-btn').click(function() { // 前へ、次へのボタンをクリックした際の動き。
+    $('.change-btn').click(function() {
+      var dir = $(this).parents('.slide-wrapper'); //対象のクラスを絞る。
-      var $displaySlide = $('.active');
+      var $displaySlide = dir.find('.active'); // 表示されているスライドをdisplaySlideと名付ける。
       $displaySlide.removeClass('active'); // .activeが付いていたスライドから.activeを取り除く。
       if ($(this).hasClass('next-btn')) {
-        $displaySlide.next().addClass('active'); // 今クリックしたボタンに.next-btnクラスがついていたら、その次のスライドにactiveを付与する。
+        $displaySlide.next().addClass('active'); // .next-btnクラスがついていたら、その次のスライドにactiveを付与する。
       }
       else {
-        $displaySlide.prev().addClass('active'); // 今クリックしたボタンに.prev-btnクラスがついていたら、その前のスライドにactiveを付与する。
+        $displaySlide.prev().addClass('active'); // .prev-btnクラスがついていたら、その前のスライドにactiveを付与する。
       }
-      var dir = $(this).parents('.slide-wrapper');
       toggleChangeBtn(dir);
     });

追記内にて、引数の処理に関する記載を編集致しました。

2021/06/03 03:33

投稿

punchan36

スコア105

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -506,7 +506,7 @@
   $(function() {
-    function toggleChangeBtn(){
+    function toggleChangeBtn(dir){
       var currentSlide = $('.active');
@@ -526,7 +526,7 @@
-    $('.index-btn').click(function(dir) { // ページ番号をクリックした際の動き。
+    $('.index-btn').click(function() { // ページ番号をクリックした際の動き。
       $('.active').removeClass('active'); // .activeクラスが付いていたスライドから.activeを取り除く。
@@ -544,7 +544,7 @@
-    $('.change-btn').click(function(dir) { // 前へ、次へのボタンをクリックした際の動き。
+    $('.change-btn').click(function() { // 前へ、次へのボタンをクリックした際の動き。
       var $displaySlide = $('.active');

「追記」内のslide.jsにあります引数部分を編集致しました。

2021/06/03 01:52

投稿

punchan36

スコア105

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -526,7 +526,7 @@
-    $('.index-btn').click(function() { // ページ番号をクリックした際の動き。
+    $('.index-btn').click(function(dir) { // ページ番号をクリックした際の動き。
       $('.active').removeClass('active'); // .activeクラスが付いていたスライドから.activeを取り除く。
@@ -544,7 +544,7 @@
-    $('.change-btn').click(function() { // 前へ、次へのボタンをクリックした際の動き。
+    $('.change-btn').click(function(dir) { // 前へ、次へのボタンをクリックした際の動き。
       var $displaySlide = $('.active');

「追記」から下を追加致しました。

2021/06/02 09:43

投稿

punchan36

スコア105

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -355,3 +355,223 @@
 Rails 5.2.3
 jquery 1.12.4
+### 追記
+ご回答を元にしたコードを追記致します。
+こちらのコードでも、質問前と同様に上手く動きませんでした。状況は以下の通りです。
+0. 「スライド1、2」に関わらず、最初にクリックしたスライドは全ての機能が上手く動く。
+0. スライドを一旦閉じもう片方のスライドをクリックすると、中身（あ, い, う, か, き, くの文字）が無い空白のページが表示される。
+0. 更には1ページ目から必ず表示される訳ではなく、先ほどのスライドを何ページ目で閉じたかに依存して途中のページから表示されたりする。
+0. 「← 前へ」や「次へ →」ボタンを押しても相変わらずページの中身が表示されないままページ遷移だけするが、一度「ページボタン」を押せばその番号に対応したページ内容が表示され、その後であれば「← 前へ」や「次へ →」ボタンも機能するようになる。
+テストまでして頂き有難うございます。どこかコードに相違点がありますでしょうか。
+**slide.html.erb**
+```rails
+<ul>
+  <li><div data-target="slide01" class="click-modal">スライド1</div>
+    <div id="slide01" class="modal-wrapper">
+      <div class="modal">
+        <div class="close-modal">
+          <i class="fa fa-2x fa-times"></i>
+        </div>
+        <div class="slide-wrapper">
+          <div class="slide-title">スライド1</div>
+          <div class="change-btn-wrapper">
+            <div class="change-btn prev-btn">← 前へ</div>
+            <div class="change-btn next-btn">次へ →</div>
+          </div>
+          <ul class="slides">
+            <li class="slide firstSlide active">あ</li>
+            <li class="slide">い</li>
+            <li class="slide lastSlide">う</li>
+          </ul>
+          <div class="index-btn-wrapper">
+            <div class="index-btn">1</div>
+            <div class="index-btn">2</div>
+            <div class="index-btn">3</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </li>
+  <li><div data-target="slide02" class="click-modal">スライド2</div>
+    <div id="slide02" class="modal-wrapper">
+      <div class="modal">
+        <div class="close-modal">
+          <i class="fa fa-2x fa-times"></i>
+        </div>
+        <div class="slide-wrapper">
+          <div class="slide-title">スライド2</div>
+          <div class="change-btn-wrapper">
+            <div class="change-btn prev-btn">← 前へ</div>
+            <div class="change-btn next-btn">次へ →</div>
+          </div>
+          <ul class="slides">
+            <li class="slide firstSlide active">か</li>
+            <li class="slide">き</li>
+            <li class="slide lastSlide">く</li>
+          </ul>
+          <div class="index-btn-wrapper">
+            <div class="index-btn">1</div>
+            <div class="index-btn">2</div>
+            <div class="index-btn">3</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </li>
+</ul>
+```
+**slide.js**
+```js
+$(document).on('turbolinks:load', function() {
+  $(function() {
+    function toggleChangeBtn(){
+      var currentSlide = $('.active');
+      $('.change-btn').show();
+      if (currentSlide.hasClass('firstSlide')) {
+        $('.prev-btn').hide(); // 表示されているスライドが最初のページの場合「前へ」は非表示。
+      } else if (currentSlide.hasClass('lastSlide')) {
+        $('.next-btn').hide(); // 表示されているスライドが最後のページの場合「次へ」は非表示。
+      }
+    }
+    $('.index-btn').click(function() { // ページ番号をクリックした際の動き。
+      $('.active').removeClass('active'); // .activeクラスが付いていたスライドから.activeを取り除く。
+      var clickedIndex = $('.index-btn').index($(this));
+      $('.slide').eq(clickedIndex).addClass('active'); // 今クリックされたページ番号と同じインデックス番号を持つスライドに.activeを付与する。
+      var dir = $(this).parents('.slide-wrapper');
+      toggleChangeBtn(dir);
+    });
+    $('.change-btn').click(function() { // 前へ、次へのボタンをクリックした際の動き。
+      var $displaySlide = $('.active');
+      $displaySlide.removeClass('active'); // .activeが付いていたスライドから.activeを取り除く。
+      if ($(this).hasClass('next-btn')) {
+        $displaySlide.next().addClass('active'); // 今クリックしたボタンに.next-btnクラスがついていたら、その次のスライドにactiveを付与する。
+      }
+      else {
+        $displaySlide.prev().addClass('active'); // 今クリックしたボタンに.prev-btnクラスがついていたら、その前のスライドにactiveを付与する。
+      }
+      var dir = $(this).parents('.slide-wrapper');
+      toggleChangeBtn(dir);
+    });
+  })
+});
+```

タグにJavaScriptを追加致しました。

2021/06/02 08:28

投稿

punchan36

スコア105

test CHANGED Viewed

File without changes

test CHANGED Viewed

File without changes