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

Posted 2023-05-09

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

【英文标题】：How to fix an array of elements in my section. It won't display my work when I call the function...?

【发布时间】：2019-12-12 04:22:30

【问题描述】：

所以我的工作理念是在我的部分中的 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>

【问题讨论】：

您应该将所有相关代码放入您的问题中。在您的代码笔中，所有这些对我来说都是空白的，我没有看到 gofwd/gobwd 函数？最后，您不会从 initApp 返回任何内容。

@zfrisch 抱歉忘记将滑块代码文件添加到 codepen 项目中。再次检查，它现在在项目中。另外，相关代码在我的问题中。例如，当我有这样的代码时 $('#products article').each(function(index) $(this).append('hello') );我的每张幻灯片都会显示“你好”这个词

【参考方案1】：

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

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

向上移动const initApp，或

声明一个这样的函数：

function initApp(index)
  // …

【讨论】：

伙伴非常感谢你。几天来我一直压力很大。只是表明有时我们需要休息并以全新的眼光和头脑回到项目中才能解决问题。但是，codepen.io/Rosstopherrr/pen/GVRvxJ 是不是让你的浏览器变慢了现在有一个由三个 3D 罐组成的循环？