티스토리 뷰

유료강의/국비지원

웹퍼블리셔 기본 7일차 - 제이쿼리 메소드 및 활용

2021bong 2021. 9. 29. 19:10

좋아요 싫어요 버튼 만들기

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>

<body>
  <article class="e-calc">
    <h2>증감or감소</h2>
    <p>0</p>
    <button>좋아요</button>
    <button>싫어요</button>
  </article>
</body>
<script>
  let num = 0;
  $('.e-calc button').eq(0).click(function () {
    num++;
    $('.e-calc p').text(num)
  });
  $('.e-calc button').eq(1).click(function () {
    num++;
    $('.e-calc p').text(num)
  });
  $('.e-calc p').text(num);
  // .text 메소드 = .textContent
  // .html 메소드 = .innerHTML
</script>

</html>

 

좀 더 줄여서 쓰기

<script>
  let num = 0;
  function result(bln) { 
    bln ? num++ : num--;
      $('.e-calc p').text(num);
  } //텍스트 넣는 것을 함수 선언
  
  // $(this).text() 빈 괄호를 넣으면 값을 받아옴
  // $(this).index() 를 사용해도 됨!
  
  $('.e-calc button').click(function () {
    if($(this).text() == '좋아요'){ //text() 값이 좋아요면 true
      result(true);
    } else { //아니면 false
      result(false);
    }
  });
</script>

실행을 위한 조건문을 만들 때

차이점을 찾아서 그걸로 조건문을 만들기

ex : 컨텐츠의 내용이 다름, 인덱스 번호가 다름, 설정한 클래스 이름이 다름 등등

 

+

num++로 처음하면 값이 이상하게 나오고 ++num해야 원하는 값이 나오더니

다시 num++로 바꾸면 원하는 값이 나온다... 왜지???

 

 

사진 움직이기

//photo 이번엔 class 값 가져오기
let dis = 100;
function move(bln) {
  bln ? dis+=100 : dis-=100; //100씩 움직이기
  $('.e-photo figure').css({
    transform: `translateX(${dis}px)` //transform을 사용해서 X축으로 움직이기
  });
}
$('.e-photo button').click(function () {
  if ($(this).hasClass('next')) { //.hasClass = class값을 받아온다음 해당 값을 확인해주는 메소드
    move(true);
  } else {
    move(false);
  }
});

 

+

사진이 브라우저 바깥으로 나가지 않게 하기

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>

<body>
  <style>
    .e-photo figure {
      width: 400px;
      height: 200px;
      overflow: hidden;
      margin: 0;
    }

    .e-photo figure img {
      width: 100%;
    }
  </style>

  <article class="e-photo">
    <h2>next or prev</h2>
    <figure>
      <img
        src="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FLhSxY%2FbtqCd0jZniK%2FpBY4h2U8ivkQaPWs7nsrkk%2Fimg.jpg"
        alt="모동숲 로고">
    </figure>
    <button class="prev">prev</button>
    <button class="next">next</button>
  </article>
</body>
<script>
  //photo
  let dis = 100;
  let browserWidth = document.body.clientWidth
  function move(bln) {
    bln ? dis += 100 : dis -= 100;
    let browserWidth = document.body.clientWidth
    if(dis > (browserWidth - $('.e-photo figure img').width())) {
      // console.log(dis, browserWidth);
      dis = browserWidth - $('.e-photo figure img').width();
    } else if (dis < 0) {
      dis = 0;
    }
    $('.e-photo figure').css({
      transform: `translateX(${dis}px)`,
      transition: '0.5s'
    });
  }
  $('.e-photo button').click(function () {
    if ($(this).hasClass('next')) { //.hasClass = class값을 받아온다음 해당 값을 확인해주는 메소드
      move(true);
    } else {
      move(false);
    }
  });

  console.log(browserWidth);

</script>

</html>

 

 

버튼을 누르면 그 위치로 가게하기

<script>
//photo2
  $('.e-photo2 button').click(function () {
    $('.e-photo2 figure').css({
      transform: `translateX(${$(this).text()}px)`,
      transition: '0.5s'
    })
  });
</script>

 

+

슬라이드처럼 만들기

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>

<body>
  <style>
    .e-photo3 div {
      width: 100px;
      height: 100px;
      overflow: hidden;
    }

    .e-photo3 figure {
      display: flex;
      margin: 0;
    }

    .e-photo3 figure p {
      width: 100px;
      height: 100px;
      margin: 0;
      border: solid 1px #000;
      flex-shrink: 0;
      box-sizing: border-box;
    }
  </style>

  <article class="e-photo3">
    <h2>like slide</h2>
    <div>
      <figure>
        <p>01</p>
        <p>02</p>
        <p>03</p>
      </figure>
    </div>
    <button class="prev">prev</button>
    <button class="next">next</button>
  </article>
</body>

<script>

  //photo3
  dis = 0;
  function slide(bln) {
    bln ? dis -= 100 : dis += 100;
    if (dis > 0) { // 01을 넘어가지 않게 하기
      dis = 0;
      // console.log(dis); dis값 확인
    } else if (dis < -200) { // 03을 넘어가지 않게 하기
      dis = -200;
      // console.log(dis);
    }
    $('.e-photo3 figure').css({
      transform: `translateX(${dis}px)`,
      transition: '0.5s'
    });
  }
  $('.e-photo3 button').click(function () {
    if ($(this).hasClass('next')) {
      slide(true);
    } else {
      slide(false);
    }
  });

</script>

</html>
728x90

'유료강의 > 국비지원' 카테고리의 다른 글

웹퍼블리셔 기본 9일차 - 브라우저 메소드  (0) 2021.10.05
웹퍼블리셔 기본 8일차 - js파일 로드, 자주 쓰는 제이쿼리 메소드  (0) 2021.09.30
웹퍼블리셔 기본 6일차 - 날짜함수, 제이쿼리  (0) 2021.09.28
웹퍼블리셔 기본 5일차 - switch 문, selector, 날짜함수  (0) 2021.09.27
웹퍼블리셔 기본 4일차 - while 문, for 문, 함수선언식, Math  (0) 2021.09.23
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2025/01   »
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
글 보관함