Question

我正在尝试创建一个画廊。得益于一些在线教程，大多数内容已经可以使用。在最后一页上应该有一个滑块，还有一些要单击的缩略图将影响滑块。我试图通过与身份合作来实现这一目标。我现在面临的问题是单击匹配的img时更改状态。

const imgs = document.querySelectorAll('.imgs img');
let status = 0;
var num = document.querySelectorAll('.profile_pics img').length;
let maxstatus = status + num;

imgs.forEach(img => img.addEventListener('click', imgClick));

function imgClick(){
  for(let f = 0; f < imgs.length; f++){ 
    if(imgs[f].click == true){
      status = [f];
    }
  }
}

// Rest of the code (is working)

function reset(){
  for(let i = 0; i < maxstatus; i++){
    slides[i].style.display = 'none';
    slides[i].style.opacity = 0;
    slides[i].classList.add('fade_in');
    imgs[i].style.opacity = 1;
  }
}

function focus(){
  imgs[status].style.opacity = opacity;
  }

function startSlide(){
  reset();
  slides[0].style.display = 'block';
}


function slideLeft(){
  reset();
  slides[status - 1].style.display = 'block';
  status--;
  focus()
  console.log(status);
}


function slideRight(){
  reset();
  slides[status + 1].style.display = 'block';
  status++;
  focus()
  console.log(status);
}


prevBtn.addEventListener('click', function(){
  if(status === 0){
    status = maxstatus;
  }
  slideLeft();
});


nextBtn.addEventListener('click', function(){
  if(status === maxstatus - 1){
    status = -1;
  }
  slideRight();
});

startSlide();

我已经尝试了几个小时，但找不到解决方案。当然可以使用console.log，但是在单击其中一张图像时根本无法使状态更新正常工作。

我们将不胜感激-非常感谢

Answer 1

完整代码可在此处找到：Paste Bin Link

更新：

// Global Variable
let status = -1;
let imgs = [
    $('#img0'),
    $('#img1'),
    $('#img2'),
    $('#img3'),
    $('#img4'),
    $('#img5'),
]

// Functions
function imgClick(elm){
    status = imgs.indexOf(elm); // This will set the status variable to the element index, using indexOf function. it will check inside of imgs variable which element index it is, if it cant be found status will return a -1  value
}

// Execute
imgs.forEach(img => img.on('click', () => {
    imgClick(img);  
}));

单击特定节点时如何更改状态

1 个答案: