Question

我正在学习javascript，并尝试不同的项目/编码挑战。编写此代码后，我意识到它是43行（这是用于基本图像滑块的），并且它并不是执行此操作的最有效方法。有什么办法可以缩短我的代码，或者使其效率更高？该脚本说，当您按向右时，它将转到下一张图像；当您按向左时，它将转到上一张图像

// Try edit message
const data = [
  {
    image:"https://image.shutterstock.com/image-photo/bright-spring-view-cameo-island-260nw-1048185397.jpg",
  },
  {
    image:"https://image.shutterstock.com/image-photo/mountains-during-sunset-beautiful-natural-260nw-407021107.jpg",
  },
]

let img = document.querySelector("img")
let left = document.querySelector('#left')
let right = document.querySelector('#right')
let origin = 0
img.src = data[origin].image

function incr(number){
  if (number == 'left') {
    if (origin - 1 >= 0){
      origin += -1
    }else{
      origin = data.length - 1
    }
  }else if (number == 'right'){
    if (origin + 1 <= data.length - 1){
      origin += 1
    }else{
      origin = 0
    }
    }
  return origin;
  }

function moveleft(){
  let value = incr('left')
  img.src = data[value].image
}

function moveright(){
  let value = incr('right')
  img.src = data[value].image
}

<div>
  <img src="https://playcode.io/static/img/logo.png" width = 1280px height = 720px>
  <button onclick = "moveleft()" id = 'left'>left</button>
  <button onclick = "moveright()" id = 'right'>right</button>
</div>

感谢所有帮助。

Answer 1

您可以执行以下操作：

function incr(offset) {
  // either +1 or +(-1)
  const incremented = origin + offset;
  // Take the smallest value out of the 2, effectively constrains to <= len - 1
  const constrainedUpper = Math.min(data.length - 1, incremented); 
  // Take the largest value out of the 2, effectively constrains to >= 0
  const constrainedLower = Math.max(0, constrainedUpper);
  origin = constrainedLower;
}

function moveleft(){
  incr(-1)
  img.src = data[origin].image;
}

function moveright(){
  incr(1)
  img.src = data[origin].image
}

删除'left'和'right'，因为它们实际上只是指示您要移动多少。然后，使用数学函数将结果约束为0和data.length - 1。

有什么方法可以使这段代码更短，更有效？

1 个答案: