Question

我的代码带有单选按钮，但我想使一个简单的按钮是什么能够进行相同的更改，我每次点击都会显示框的另一面。

我想学习，免费解释有关此代码的所有内容。

<?php

$vidFile=$_GET["file"];

$videoURL = "https://another-hosting.org/$vidFile";

header("Cache-Control: public");
header("Content-Description: File Transfer");
header("Content-Disposition: attachment; filename=video.mp4");
header("Content-Type: video/mp4");

readfile($videoURL);

var box = document.querySelector('.box'); //Choose the first from "images"//
var radioGroup = document.querySelector('.radio-group'); //choose the first item from buttons
var currentClass = '';

function changeSide() {
  var checkedRadio = radioGroup.querySelector(':checked');
  var showClass = 'show-' + checkedRadio.value;
  if (currentClass) {
    box.classList.remove(currentClass);
  }
  box.classList.add(showClass);
  currentClass = showClass;
}
// set initial side
changeSide();

radioGroup.addEventListener('change', changeSide);

body {
  font-family: sans-serif;
}

.scene {
  width: 640px;
  height: 360px;
  border: 1px solid #CCC;
  margin: 80px;
  perspective: 1000px;
}

.box {
  width: 640px;
  height: 360px;
  position: relative;
  transform-style: preserve-3d;
  transform: translateZ(-50px);
  transition: transform 1s;
}

.box.show-front {
  transform: translateZ( -50px) rotateY( 0deg);
}

.box.show-back {
  transform: translateZ( -50px) rotateY(-180deg);
}

.box.show-right {
  transform: translateZ(-150px) rotateY( -90deg);
}

.box.show-left {
  transform: translateZ(-150px) rotateY( 90deg);
}

.box.show-top {
  transform: translateZ(-100px) rotateX( -90deg);
}

.box.show-bottom {
  transform: translateZ(-100px) rotateX( 90deg);
}

.box__face {
  position: absolute;
  border: 2px solid black;
  font-size: 40px;
  font-weight: bold;
  color: white;
  text-align: center;
}

.box__face--front,
.box__face--back {
  width: 640px;
  height: 360px;
  line-height: 200px;
}

.box__face--right,
.box__face--left {
  width: 100px;
  height: 200px;
  left: 100px;
  line-height: 500px;
}

.box__face--top,
.box__face--bottom {
  width: 640px;
  height: 360px;
  top: -60px;
  line-height: 100px;
}

.box__face--front {
  background: hsla( 0, 100%, 50%, 0.7);
}

.box__face--right {
  background: hsla( 60, 100%, 50%, 0.7);
}

.box__face--back {
  background: hsla(120, 100%, 50%, 0.7);
}

.box__face--left {
  background: hsla(180, 100%, 50%, 0.7);
}

.box__face--top {
  background: hsla(240, 100%, 50%, 0.7);
}

.box__face--bottom {
  background: hsla(300, 100%, 50%, 0.7);
}

.box__face--front {
  transform: rotateY( 0deg) translateZ( 180px);
}

.box__face--back {
  transform: rotateY(180deg) translateZ( 180px);
}

.box__face--right {
  transform: rotateY( 90deg) translateZ(150px);
}

.box__face--left {
  transform: rotateY(-90deg) translateZ(150px);
}

.box__face--top {
  transform: rotateX( 90deg) translateZ(120px);
}

.box__face--bottom {
  transform: rotateX(-90deg) translateZ(240px);
}

label {
  margin-right: 10px;
}

Answer 1

创建html按钮。在脚本中创建一个数组。

let values = ["back", "front", "top"];

创建全局索引。

let index = 0;

实现您创建的按钮的点击事件，并调用changeSide(values[index])。对于上述调用，您需要修改现有代码。

function changeSide(value) {
  var showClass = 'show-' + value;
  if ( currentClass ) {
    box.classList.remove( currentClass );
  }
  box.classList.add( showClass );
  currentClass = showClass;
}

以所需的方式更改索引。我的意思是增加它或选择随机值。我希望你能得到答案。

Answer 2

这种方式将获得双方，然后允许您在它们之间进行切换：

var box = document.querySelector('.box'); //Choose the first from "images"//
var radioGroup = document.querySelector('.radio-group');//choose the first item from buttons
var currentClass = '';

var sideNames = [];
var currentSide = 0;

function changeSide() {
  var sides = document.querySelectorAll('.box__face');

  sides.forEach(side => sideNames.push(side.className.split('--')[1]));

  var showClass = 'show-' + sideNames[currentSide];
  
  if ( currentClass ) {
    box.classList.remove( currentClass );
  }
  box.classList.add( showClass );
  currentClass = showClass;
  currentSide++;
}


radioGroup.addEventListener( 'click', changeSide );

document.addEventListener("DOMContentLoaded", function() {
  // set initial side

changeSide();
});

body { font-family: sans-serif; }

.scene {
  width: 640px;
  height: 360px;
  border: 1px solid #CCC;
  margin: 80px;
  perspective: 1000px;
}

.box {
  width: 640px;
  height: 360px;
  position: relative;
  transform-style: preserve-3d;
  transform: translateZ(-50px);
  transition: transform 1s;
}

.box.show-front  { transform: translateZ( -50px) rotateY(   0deg); }
.box.show-back   { transform: translateZ( -50px) rotateY(-180deg); }
.box.show-right  { transform: translateZ(-150px) rotateY( -90deg); }
.box.show-left   { transform: translateZ(-150px) rotateY(  90deg); }
.box.show-top    { transform: translateZ(-100px) rotateX( -90deg); }
.box.show-bottom { transform: translateZ(-100px) rotateX(  90deg); }


.box__face {
  position: absolute;
  border: 2px solid black;
  font-size: 40px;
  font-weight: bold;
  color: white;
  text-align: center;
}

.box__face--front,
.box__face--back {
  width: 640px;
  height: 360px;
  line-height: 200px;
}

.box__face--right,
.box__face--left {
  width: 100px;
  height: 200px;
  left: 100px;
  line-height: 500px;
}

.box__face--top,
.box__face--bottom {
  width: 640px;
  height: 360px;
  top: -60px;
  line-height: 100px;
}

.box__face--front  { background: hsla(  0, 100%, 50%, 0.7); }
.box__face--right  { background: hsla( 60, 100%, 50%, 0.7); }
.box__face--back   { background: hsla(120, 100%, 50%, 0.7); }
.box__face--left   { background: hsla(180, 100%, 50%, 0.7); }
.box__face--top    { background: hsla(240, 100%, 50%, 0.7); }
.box__face--bottom { background: hsla(300, 100%, 50%, 0.7); }

.box__face--front  { transform: rotateY(  0deg) translateZ( 180px); }
.box__face--back   { transform: rotateY(180deg) translateZ( 180px); }

.box__face--right  { transform: rotateY( 90deg) translateZ(150px); }
.box__face--left   { transform: rotateY(-90deg) translateZ(150px); }

.box__face--top    { transform: rotateX( 90deg) translateZ(120px); }
.box__face--bottom { transform: rotateX(-90deg) translateZ(240px); }

label { margin-right: 10px; }

<!DOCTYPE html>
<html>
<head>
  <title> </title>
  <link rel="stylesheet" type="text/css" href="style.css">


</head>
  <body>

    <div class="scene">
      <div class="box">
        <div class="box__face box__face--front"><img src="23.png " alt="Smiley face" height="360" width="640"></div>
        <label>
          <input type="radio" name="rotate-cube-side" value="bottom"  class="lab"/> bottom
        </label>
        <div class="box__face box__face--back">back</div>
        <div class="box__face box__face--right">right</div>
        <div class="box__face box__face--left">left</div>
        <div class="box__face box__face--top"><img src="23.png " alt="Smiley face" height="100" width="300"></div>
        <div class="box__face box__face--bottom">bottom</div>
      </div>

    </div>
    <p class="radio-group">
      <button>Change</button>

    </p>


    <br />


  <script src="funci.js"></script>

  </body>
</html>

从这三个收音机中按下一个按钮

2 个答案: