이 코드를 더 짧고 효율적으로 만들 수있는 방법이 있습니까?

다니엘 P533

나는 자바 스크립트를 배우고 다른 프로젝트 / 코딩 과제를 시도했습니다. 이 코드를 작성한 후 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>

감사합니다.

에반 트림 볼리

다음과 같이 할 수 있습니다.

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.

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정
0

몇 마디 만하겠습니다

0리뷰
로그인참여 후 검토

관련 기사

분류에서Dev

루프를 통해이 코드를 어떻게 개선하여 훨씬 더 짧고 효율적으로 만들 수 있습니까?

분류에서Dev

누군가이 코드를 더 효율적으로 만들 수 있습니까?

분류에서Dev

이 코드를 더 효율적으로 만들 수있는 방법을 아십니까?

분류에서Dev

이것을 더 효율적으로 만드는 방법이 있습니까?

분류에서Dev

이 SQL 쿼리를 더 효율적으로 만들 수 있습니까?

분류에서Dev

이 Python kNN 함수를 더 효율적으로 만드는 방법이 있습니까?

분류에서Dev

이 Python kNN 함수를 더 효율적으로 만드는 방법이 있습니까?

분류에서Dev

이 알고리즘을 퍼즐에 더 효율적으로 만들 수있는 방법은 무엇입니까?

분류에서Dev

이 PHP 코드를 더 짧게 만들 수 있습니까?

분류에서Dev

이 PL / SQL 커서를 더 효율적으로 만들 수있는 방법은 무엇입니까?

분류에서Dev

이 루프를 더 효율적으로 만들 수있는 방법은 무엇입니까?

분류에서Dev

이 MySQL 쿼리를 더 효율적으로 만드는 방법이 있습니까?

분류에서Dev

이 PHP 함수를 대규모로 어떻게 더 효율적으로 만들 수 있습니까?

분류에서Dev

순방향 계산이 필요할 때 루프를 효율적으로 만드는 더 좋고 빠르며 읽기 쉬운 방법이 있습니까?

분류에서Dev

자바 스크립트의 조건에 따라 핀을 업데이트해야하는 경우 코드를 더 효율적으로 만들 수 있습니까?

분류에서Dev

코드를 더 효율적이고 짧게 만들려면 어떻게해야합니까?

분류에서Dev

이 정규식을 더 효율적으로 만드는 방법이 있습니까?

분류에서Dev

이 코드를 더 빠르게 만들 수있는 방법이 있습니까?

분류에서Dev

이 코드를 더 좋게 만들 수있는 방법이 있습니까?

분류에서Dev

이 코드를 더 간결하고 효율적으로 만들려면 어떻게해야합니까?

분류에서Dev

누군가이 코드를 더 짧게 만들 수 있습니까?

분류에서Dev

코드를 더 간단하게 만들 수있는 방법이 있습니까?

분류에서Dev

이 기능 방어를 더 짧게 만들 수 있습니까?

분류에서Dev

이 기능 방어를 더 짧게 만들 수 있습니까?

분류에서Dev

Dijkstra 알고리즘에서이 수정을 더 효율적으로 만들 수있는 방법은 무엇입니까?

분류에서Dev

이 쿼리를 더 효율적으로 만들 수 없습니다.

분류에서Dev

이 PyTorch 히트 맵 기능을 더 빠르고 효율적으로 만들 수있는 방법은 무엇입니까?

분류에서Dev

더 깨끗하고 짧고 효율적인 방법으로 널 체크를 갖는이 센티넬 루프를 작성하는 방법은 무엇입니까?

분류에서Dev

이 배열 조합 알고리즘을 더 효율적으로 만드는 방법은 무엇입니까?

Related 관련 기사

  1. 1

    루프를 통해이 코드를 어떻게 개선하여 훨씬 더 짧고 효율적으로 만들 수 있습니까?

  2. 2

    누군가이 코드를 더 효율적으로 만들 수 있습니까?

  3. 3

    이 코드를 더 효율적으로 만들 수있는 방법을 아십니까?

  4. 4

    이것을 더 효율적으로 만드는 방법이 있습니까?

  5. 5

    이 SQL 쿼리를 더 효율적으로 만들 수 있습니까?

  6. 6

    이 Python kNN 함수를 더 효율적으로 만드는 방법이 있습니까?

  7. 7

    이 Python kNN 함수를 더 효율적으로 만드는 방법이 있습니까?

  8. 8

    이 알고리즘을 퍼즐에 더 효율적으로 만들 수있는 방법은 무엇입니까?

  9. 9

    이 PHP 코드를 더 짧게 만들 수 있습니까?

  10. 10

    이 PL / SQL 커서를 더 효율적으로 만들 수있는 방법은 무엇입니까?

  11. 11

    이 루프를 더 효율적으로 만들 수있는 방법은 무엇입니까?

  12. 12

    이 MySQL 쿼리를 더 효율적으로 만드는 방법이 있습니까?

  13. 13

    이 PHP 함수를 대규모로 어떻게 더 효율적으로 만들 수 있습니까?

  14. 14

    순방향 계산이 필요할 때 루프를 효율적으로 만드는 더 좋고 빠르며 읽기 쉬운 방법이 있습니까?

  15. 15

    자바 스크립트의 조건에 따라 핀을 업데이트해야하는 경우 코드를 더 효율적으로 만들 수 있습니까?

  16. 16

    코드를 더 효율적이고 짧게 만들려면 어떻게해야합니까?

  17. 17

    이 정규식을 더 효율적으로 만드는 방법이 있습니까?

  18. 18

    이 코드를 더 빠르게 만들 수있는 방법이 있습니까?

  19. 19

    이 코드를 더 좋게 만들 수있는 방법이 있습니까?

  20. 20

    이 코드를 더 간결하고 효율적으로 만들려면 어떻게해야합니까?

  21. 21

    누군가이 코드를 더 짧게 만들 수 있습니까?

  22. 22

    코드를 더 간단하게 만들 수있는 방법이 있습니까?

  23. 23

    이 기능 방어를 더 짧게 만들 수 있습니까?

  24. 24

    이 기능 방어를 더 짧게 만들 수 있습니까?

  25. 25

    Dijkstra 알고리즘에서이 수정을 더 효율적으로 만들 수있는 방법은 무엇입니까?

  26. 26

    이 쿼리를 더 효율적으로 만들 수 없습니다.

  27. 27

    이 PyTorch 히트 맵 기능을 더 빠르고 효율적으로 만들 수있는 방법은 무엇입니까?

  28. 28

    더 깨끗하고 짧고 효율적인 방법으로 널 체크를 갖는이 센티넬 루프를 작성하는 방법은 무엇입니까?

  29. 29

    이 배열 조합 알고리즘을 더 효율적으로 만드는 방법은 무엇입니까?

뜨겁다태그

보관