質問編集履歴

2020/12/29 06:04

投稿

HHH-

スコア28

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -49,317 +49,3 @@
 どうすればいいのですが？
 また私みたいなケースはJSアンカータグで解決できるのでしょうか…
-**追記**
-```
-<ul class="nabox">
-      <div style="float: left;" class="ui-thumbnail" tabindex="-1" data-key="1">
-            <li style="display: inline-block;">
-<input type="button" class="nab"
-       value="1"
-       id="button1"
-       onclick="disabled = true;
-       getElementById('button2').disabled = false;
-       getElementById('button3').disabled = false;
-       getElementById('button4').disabled = false;
-       getElementById('button5').disabled = false;">
-            </li>
-      </div>
-      <div style="float: left;" class="ui-thumbnail" tabindex="-1" data-key="0">
-            <li style="display: inline-block;">
-<input type="button" class="nab"
-       value="2"
-       id="button2" disabled
-       onclick="disabled = true;
-       getElementById('button1').disabled = false;
-       getElementById('button3').disabled = false;
-       getElementById('button4').disabled = false;
-       getElementById('button5').disabled = false;">
-            </li>
-      </div>
-      <div style="float: left;" class="ui-thumbnail" tabindex="-1" data-key="2">
-            <li style="display: inline-block;">
-<input type="button" class="nab"
-       value="3"
-       id="button3"
-       onclick="disabled = true;
-       getElementById('button1').disabled = false;
-       getElementById('button2').disabled = false;
-       getElementById('button4').disabled = false;
-       getElementById('button5').disabled = false;">
-            </li>
-      </div>
-      <div style="float: left;" class="ui-thumbnail" tabindex="-1" data-key="3">
-            <li style="display: inline-block;">
-<a id="ssd"></a>
-<input type="button" class="nab"
-       value="4"
-       id="button4"
-       onclick="disabled = true;
-       getElementById('button1').disabled = false;
-       getElementById('button2').disabled = false;
-       getElementById('button3').disabled = false;
-       getElementById('button5').disabled = false;">
-            </li>
-      </div>
-      <div style="float: left;" class="ui-thumbnail" tabindex="-1" data-key="4">
-            <li style="display: inline-block;">
-<input type="button" class="nab"
-       value="5"
-       id="button5"
-       onclick="disabled = true;
-       getElementById('button1').disabled = false;
-       getElementById('button2').disabled = false;
-       getElementById('button3').disabled = false;
-       getElementById('button4').disabled = false;">
-            </li>
-      </div>
-</ul>
-<script id="rendered-js">
-console.clear();
-const elPrevButton = document.querySelector('#prev');
-const elNextButton = document.querySelector('#next');
-const flipping = new Flipping();
-const elImages = Array.from(document.querySelectorAll('.ui-big-image'));
-const elThumbnails = Array.from(document.querySelectorAll('.ui-thumbnail'));
-let state = {
-  photo: 0 };
-function send(event) {
-  // read cuticle positions
-  flipping.read();
-  const elActives = document.querySelectorAll('[data-active]');
-  Array.from(elActives).
-  forEach(el => el.removeAttribute('data-active'));
-  switch (event) {
-    case 'PREV':
-      state.photo--;
-      // Math.max(state.photo - 1, 0);
-      break;
-    case 'NEXT':
-      state.photo++;
-      // Math.min(state.photo + 1, elImages.length - 1);
-      break;
-    default:
-      state.photo = +event;
-      break;}
-  var len = elImages.length;
-  // Loop Around
-  //state.photo = ( ( state.photo % len) + len ) % len;
-  state.photo = Math.max(0, Math.min(state.photo, len - 1));
-  Array.from(document.querySelectorAll(`[data-key="${state.photo}"]`)).
-  forEach(el => {
-    el.setAttribute('data-active', true);
-  });
-  // execute the FLIP animation
-  flipping.flip();
-}
-elThumbnails.forEach(thumb => {
-  thumb.addEventListener('click', () => {
-    send(thumb.dataset.key);
-  });
-});
-elPrevButton.addEventListener('click', () => {
-  send('PREV');
-});
-elNextButton.addEventListener('click', () => {
-  send('NEXT');
-});
-send(0);
-//# sourceURL=pen.js
-</script>
-```

追記

2020/12/29 06:04

投稿

HHH-

スコア28

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -49,3 +49,317 @@
 どうすればいいのですが？
 また私みたいなケースはJSアンカータグで解決できるのでしょうか…
+**追記**
+```
+<ul class="nabox">
+      <div style="float: left;" class="ui-thumbnail" tabindex="-1" data-key="1">
+            <li style="display: inline-block;">
+<input type="button" class="nab"
+       value="1"
+       id="button1"
+       onclick="disabled = true;
+       getElementById('button2').disabled = false;
+       getElementById('button3').disabled = false;
+       getElementById('button4').disabled = false;
+       getElementById('button5').disabled = false;">
+            </li>
+      </div>
+      <div style="float: left;" class="ui-thumbnail" tabindex="-1" data-key="0">
+            <li style="display: inline-block;">
+<input type="button" class="nab"
+       value="2"
+       id="button2" disabled
+       onclick="disabled = true;
+       getElementById('button1').disabled = false;
+       getElementById('button3').disabled = false;
+       getElementById('button4').disabled = false;
+       getElementById('button5').disabled = false;">
+            </li>
+      </div>
+      <div style="float: left;" class="ui-thumbnail" tabindex="-1" data-key="2">
+            <li style="display: inline-block;">
+<input type="button" class="nab"
+       value="3"
+       id="button3"
+       onclick="disabled = true;
+       getElementById('button1').disabled = false;
+       getElementById('button2').disabled = false;
+       getElementById('button4').disabled = false;
+       getElementById('button5').disabled = false;">
+            </li>
+      </div>
+      <div style="float: left;" class="ui-thumbnail" tabindex="-1" data-key="3">
+            <li style="display: inline-block;">
+<a id="ssd"></a>
+<input type="button" class="nab"
+       value="4"
+       id="button4"
+       onclick="disabled = true;
+       getElementById('button1').disabled = false;
+       getElementById('button2').disabled = false;
+       getElementById('button3').disabled = false;
+       getElementById('button5').disabled = false;">
+            </li>
+      </div>
+      <div style="float: left;" class="ui-thumbnail" tabindex="-1" data-key="4">
+            <li style="display: inline-block;">
+<input type="button" class="nab"
+       value="5"
+       id="button5"
+       onclick="disabled = true;
+       getElementById('button1').disabled = false;
+       getElementById('button2').disabled = false;
+       getElementById('button3').disabled = false;
+       getElementById('button4').disabled = false;">
+            </li>
+      </div>
+</ul>
+<script id="rendered-js">
+console.clear();
+const elPrevButton = document.querySelector('#prev');
+const elNextButton = document.querySelector('#next');
+const flipping = new Flipping();
+const elImages = Array.from(document.querySelectorAll('.ui-big-image'));
+const elThumbnails = Array.from(document.querySelectorAll('.ui-thumbnail'));
+let state = {
+  photo: 0 };
+function send(event) {
+  // read cuticle positions
+  flipping.read();
+  const elActives = document.querySelectorAll('[data-active]');
+  Array.from(elActives).
+  forEach(el => el.removeAttribute('data-active'));
+  switch (event) {
+    case 'PREV':
+      state.photo--;
+      // Math.max(state.photo - 1, 0);
+      break;
+    case 'NEXT':
+      state.photo++;
+      // Math.min(state.photo + 1, elImages.length - 1);
+      break;
+    default:
+      state.photo = +event;
+      break;}
+  var len = elImages.length;
+  // Loop Around
+  //state.photo = ( ( state.photo % len) + len ) % len;
+  state.photo = Math.max(0, Math.min(state.photo, len - 1));
+  Array.from(document.querySelectorAll(`[data-key="${state.photo}"]`)).
+  forEach(el => {
+    el.setAttribute('data-active', true);
+  });
+  // execute the FLIP animation
+  flipping.flip();
+}
+elThumbnails.forEach(thumb => {
+  thumb.addEventListener('click', () => {
+    send(thumb.dataset.key);
+  });
+});
+elPrevButton.addEventListener('click', () => {
+  send('PREV');
+});
+elNextButton.addEventListener('click', () => {
+  send('NEXT');
+});
+send(0);
+//# sourceURL=pen.js
+</script>
+```