如何修复我的部分中的元素数组。当我调用函数时它不会显示我的工作......？

Question

所以我的工作理念是在我的部分中的 10 张幻灯片中添加一个元素附加到幻灯片上，这些元素是饮料罐产品。当光标悬停在罐子上时，罐子会增加尺寸以显示罐子的真实细节。

无论如何，我已经设法创建了我的轮播活动幻灯片，可以顺时针旋转的 3D 效果罐，并且在 CSS 中有一个不同颜色罐的列表（每个瓶子类的背景不同）。

我只能让第一个可以在活动幻灯片上工作，但其余幻灯片都是空白的。我只在数组中创建了一个包含 3 个项目的列表，希望用饮料罐产品填满三张幻灯片，但没有运气？我做错了什么？

我正在调用具有罐头数组的 initApp 函数，因为我想追加项目，但一次只能追加一个...

so 在 each.function(index) - 我可以添加索引，然后在 initApp(index) 中。然后在 initApp 函数中我可以调整以便选择瓶子 [index] 然后添加。但似乎没有任何工作？我究竟做错了什么？我知道有很多方法可以做到这一点。

我可以跳过 initApp() 函数并在 .each(function() { my code to append bottle}) 中添加所有代码吗？？

// slider

$("#products>article").on("click", function(){
  $("#products>article").removeClass("active");
  $(this).addClass("active");
  animate();
});

function getActiveArticle(){ 
  var x = 0;
  $("#products>article").each(function(e){
    if($("#products>article").eq(e).hasClass("active")){
      x = e;
      return false;      
    }
  });
  return x;
}

function gofwd(){
  var activeIndex = getActiveArticle();
  var minArticles = 0;
  var maxArticles = $("#products>article").length - 1;
  if(activeIndex >= maxArticles){
    activeIndex = minArticles-1;
  }

  $("#products>article").removeClass("active");
  $("#products>article").eq(activeIndex+1).addClass("active");

  animate();
}

function gobwd(){
  var activeIndex = getActiveArticle();
  var minArticles = 1;
  var maxArticles = $("#products>article").length;

  $("#products>article").removeClass("active");
  $("#products>article").eq(activeIndex-1).addClass("active");

  animate();
}

$(document).ready(function(){
  animate();
});

function animate(){

  var articleIndex = getActiveArticle();
  var totalMargin = 25 * (articleIndex+1) - (25*(articleIndex));

  var articlePosition = Math.floor($("#products>article").eq(articleIndex).offset().left - $("#products").offset().left) - totalMargin;
  var productsHalfWidth = $("#products").width()/2;
  if(articleIndex == 0){
    var halfWidth = 150;
  }else{
    var halfWidth = 100;
  }
  var finalPosition = productsHalfWidth - articlePosition - halfWidth;
  $("#products").animate({
    "left": finalPosition,
  }, {
    duration: 500,
    easing: 'easeOutBack',
  });

}

$(window).on("resize", function(){
  animate();
});

var autoPlay = setInterval(function(){
  gofwd();
}, 3500);

$("#slider").on("mouseenter", function(){
  clearInterval(autoPlay);
});
$("#slider").on("mouseleave", function(){
  autoPlay = setInterval(function(){
    gofwd();
  }, 4500);
});

// cans

const getElement = (selector) => document.querySelector(selector);
const createElement = (tag) => document.createElement(tag);
// const addBackground1 = document.style['background'] = 'url ("https://i.postimg.cc/BZ8rj2NM/sleve.png")';

const addSideStyle = ($side, i) => {
  let deg = 3.75 * i;
  let bgPosition = 972 - (i * 10.125);

  $side.style['background-position'] = bgPosition + 'px 0';
  $side.style['-webkit-transform'] = 'rotateY(' + deg + 'deg) translateZ(154px)';
  $side.style['-moz-transform'] = 'rotateY(' + deg + 'deg) translateZ(154px)';
  $side.style['transform'] = 'rotateY(' + deg + 'deg) translateZ(154px)';
};

const createBottle = () => {
  const $bottle = createElement('div');
  $bottle.classList.add('bottle');
  const $bottleLabel = createBottleLabel();

  for (let i = 0; i < 96; i = i + 1){
    let $bottleSide = createBottleSide(i);
    $bottleLabel.append($bottleSide);
  }

  $bottle.append($bottleLabel);

  return $bottle;
};

const createBottleLabel = () => {
  const $bottleLabel = createElement('div');
  $bottleLabel.classList.add('label');

  return $bottleLabel;
}

const createBottleSide = (i) => {
  const $bottleSide = createElement('div');
  $bottleSide.classList.add('side');
  addSideStyle($bottleSide, i);

  return $bottleSide;
};

const changeBottleSize = (clickFn) => {
  const _bottle = createElement('div');
  _bottle.classList.add('bottle');

  _bottle.style['transform'] = 'scale(0.9)';
  return _bottle;
}



const clickFn = () => {
  const $bottleSize = getElement('.container');
  // const $bottle1 = changeBottleSize();
  // const $bottle2 = changeBottleSize();
  // const $bottle3 = changeBottleSize();

  $bottleSize.style['transform'] = 'scale(0.9)';
  return $bottleSize;
}

$('#products article').each(function(index) {
  $(this).append(initApp())
});


const initApp = (index) => {
  const $container = getElement('.container');
  const $bottle1 = createBottle();
  const $bottle2 = createBottle();
  const $bottle3 = createBottle();

  [$bottle1, $bottle2, $bottle3].forEach(($bottle, i) => {
    $bottle.classList.add('bottle' + i);
  });

  $container.append($bottle1, $bottle2, $bottle3);  
};



initApp();

* {
  padding: 0;
  margin: 0;
  font-family: "Arial";
  box-sizing: border-box;
}

body {
  background-color: #444;
}

#slider {
  position: relative;
  overflow: hidden;
  width: 90vw;
  height: 750px;
  margin: 50px auto;
  background-color: rgba(255, 255, 255, .5);
}

#products {
  position: relative;
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  padding: 0 25px;
}

#products>article:first-child {
  margin-left: 0;
}

#products>article {
  position: relative;
  min-width: 250px;
  min-height: 250px;
  margin-left: 25px;
  font-size: 17px;
  cursor: pointer;
  /* background-color: rgba(255,0,0,.5); */
  transition: all .3s ease-in-out;
}

#products>article.active {
  min-width: 300px;
  min-height: 300px;
  font-size: 20px;
}

#picText {
  position: absolute;
  color: #fff;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-45deg);
}

#id {
  color: #fff;
  margin: 15px;
}

#gofwd,
#gobwd {
  position: absolute;
  top: 50%;
  padding: 50px 15px;
  z-index: 1;
  cursor: pointer;
  background-color: rgba(255, 255, 255, .6);
  transform: translateY(-50%);
  transition: all .3s ease-out;
}

#gofwd:hover,
#gobwd:hover {
  background-color: #fff;
}

#gobwd {
  left: 0;
}

#gofwd {
  right: 0;
}

.can {
  position: relative;
}

.bottle:hover {
  transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg)
  /* translate3d(350px, 190px, 40px) */
  scale(0.7);
}

.bottle {
  transition: all 0.2s;
  width: 10.125px;
  -webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate3d(650px, 190px, 40px);
  -moz-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate3d(650px, 190px, 40px);
  transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate3d(350px, 190px, 40px);
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
  transform: scale(0.2);
  position: absolute;
}

.bottle0 {
  top: 40px;
  left: 100px;
}

.bottle1 {
  top: 100px;
  left: 500px;
}

.bottle2 {
  top: 100px;
  left: 700px;
}

.bottle>img {
  position: absolute;
  top: -180px;
  left: -182px;
  width: 374px;
}

.label {
  -webkit-animation: spin 10s infinite linear;
  -moz-animation: spin 10s infinite linear;
  animation: spin 10s infinite linear;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
}

.side {
  position: absolute;
  width: 10.55px;
  height: 679px;
  margin-bottom: 400px;
}

.bottle0 .side {
  background: url("https://i.postimg.cc/BZ8rj2NM/sleve.png");
}

.bottle1 .side {
  background: url("https://i.postimg.cc/Fs2RgnN6/passion.png");
}

.bottle2 .side {
  background: url("https://i.postimg.cc/zGzJjm40/raspberry.png");
}

@-webkit-keyframes spin {
  from {
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg);
  }
  to {
    -webkit-transform: rotateY(-360deg);
    transform: rotateY(-360deg);
  }
}

@-moz-keyframes spin {
  from {
    -moz-transform: rotateY(0deg);
    transform: rotateY(0deg);
  }
  to {
    -moz-transform: rotateY(-360deg);
    transform: rotateY(-360deg);
  }
}

@keyframes spin {
  from {
    -webkit-transform: rotateY(0deg);
    -moz-transform: rotateY(0deg);
    transform: rotateY(0deg);
  }
  to {
    -webkit-transform: rotateY(-360deg);
    -moz-transform: rotateY(-360deg);
    transform: rotateY(-360deg);
  }
}

@mixin makeSide() {}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div id="slider">
  <span id="gofwd" onClick="gofwd();">&gt;</span>
  <span id="gobwd" onClick="gobwd();">&lt;</span>
  <div id="products">
    <article class="active">
      <div class="container"></div>
    </article>
    <article>
      <div class="container">
        <p id="id">2</p>
      </div>
    </article>
    <article>
      <div class="picture">
        <p id="id">3</p>
      </div>
    </article>
    <article>
      <div class="picture">
        <p id="id">4</p>
      </div>
    </article>
    <article>
      <div class="picture">
        <p id="id">5</p>
      </div>
    </article>
    <article>
      <div class="picture">
        <p id="id">6</p>
      </div>
    </article>
    <article>
      <div class="picture">
        <p id="id">7</p>
      </div>
    </article>
    <article>
      <div class="picture">
        <p id="id">8</p>
      </div>
    </article>
    <article>
      <div class="picture">
        <p id="id">9</p>
      </div>
    </article>
    <article>
      <div class="picture">
        <p id="id">10</p>
      </div>
    </article>
  </div>
</div>

Answer 1

如果您查看您的 Javascript 控制台，您应该会出现以下错误：

您将initApp 函数作为const 在 调用它之后创建，这是行不通的。你有两个选择：

1. 向上移动const initApp，或

2. 声明一个这样的函数：

   function initApp(index){
     // …
   }