【jQuery】toggle 메소드로 표시→비표시의 이벤트 구현

안녕하세요! 오늘은 js/jQuery로 구현하는 부분이 있어, 그 중에서 toggle가 매우 편리했기 때문에 비망록으로서.

toggle 메소드란?

toggle 메소드는 표시·숨기기를 바꿀 수가 있는 jQuery의 편리한 메소드. hide와 show가 합체한 메소드.

js/jQuery에서 click 이벤트를 구현하고 싶습니다.

구현하고 싶은 것

①클릭하면 이미지 부분이 표시된다 ② 다시 클릭하면 이미지 부분이 숨겨집니다. ※덧붙여 gyazo gif를 qitta로 표시하는 방법은 로 갈 수 있습니다 Gyazo에서 업로드한 Gif 애니메이션을 쉽게 표시하는 방법. (URL만으로 OK) htps : // 코 m / 코부토리 나 _ 하토 / ms / d28d4 c90096 058566d

준비

gem 'jquery-rails' 설명bunde install
application.js

//= require activestorage
//= require turbolinks
//= require_tree .
//= require jquery #追加
//= require jquery_ujs #追加

jQuery 라이브러리를 로드하자. JavaScript 앞에 쓰지 않으면 오류가 발생합니다.

app/views/layouts/application.html.erb

<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>

이렇게하면 스크립트 파일을로드하기 위해 스크립트 파일을 자동으로 생성합니다.

잘못

sample.html.haml

.new-member-registration-form-content__group.whatnumber-text-right
  .signup-seqcode-text
    %i.fas.fa-question-circle{ style: "color:royalblue;" }
    カード裏面の番号とは？
    .signup-seqcode-info

class의 signup-seqcode-info 를 클릭하면 이벤트 발화시키고 싶다

sample.js

$(function() {
  let btn = document.querySelector(".signup-seqcode-text");
  let image = `<div class="signup-seqcode-info is-show">
                  カードの裏面をご残照下さい。
                  <img src="//www
                  ://表示したい画像のURL" alt="" width="240">
              </div>`

  btn.addEventListener("click", function() {
    $(".signup-seqcode-info").html(image);
  });
});

지정된 클래스 이름 .signup-seqcode-text를 클릭하면 変数image가 .signup-seqcode-info 요소 아래에 표시되도록 구현할 수 있습니다. 그러나 표시는 할 수 있지만 어떻게 하면 숨길 수 있는지 모른다. off()나 remove() 사용해 보았지만, 동적으로 출현한 html을 지우는 방법이 잘 안 된다.

toggle 메소드로 쉽게 구현할 수있었습니다.

오늘의 메인 테마의 toggle 등장. 여러가지 조사해 써보고 움직이지 않아서를 반복하고 있으면, toggle 메소드라면 간단하게 갈 수 있을까.

sample.haml

.new-member-registration-form-content__group.whatnumber-text-right
            .signup-seqcode-text
              %i.fas.fa-question-circle{ style: "color:royalblue;" }
              カード裏面の番号とは？
              .signup-seqcode-info
              .signup-seqcode-info.is-show
                カードの裏面をご参照下さい
                = image_tag "//www://表示したい画像.png?3312594182", alt: "", width: "240"

표시하고 싶은 문자 カードの裏面をご参照下さい 와 이미지 부분 =image_tag.signup-seqcode-info.is-show 는 클릭하여 동적으로 추가한 DOM 요소에 주는 클래스

sample.scss

.signup-seqcode-info.is-show {
  width: 300px;
  display: none;
  position: absolute;
  top: 6px;
  z-index: 1;
  padding: 16px;
  border-radius: 6px;
  background: #eee;
  text-align: center;
  color: #333;
  line-height: 1.5;
  img {
    padding-top: 10px;
  }
}

css에서 display:none;로 설정하면 기본값이 숨겨집니다.
디폴트시는 보이지 않지만, 클릭하여 출현할 때 어디에 표시하고 싶은지를 css로 결정해 둡시다. 포인트는 z-index: 1; 잊어 버리면 다른 요소 아래에 잠입하므로주의.

sample.js

$(function() {
  $('.signup-seqcode-text').click(function() {
    $('.is-show').toggle();
  })
});

지정한 클래스명 .signup-seqcode-text 를 클릭하면 이벤트 발화
toggle은 클릭 첫 번째 show 이벤트 발화로 .is-show 부분이 표시된다
클릭 두 번째 hide 이벤트에서 .is-show 부분이 숨겨집니다.

↓↓완성형을 다시 ↓↓
처음에는 두 번 click 이벤트를 만들 필요가 있다고 생각했지만 toggle 메서드를 사용하면 매우 짧은 설명으로 구현할 수 있었다. toggle은 인수도 지정할 수 있습니다. 【대상 요소.toggle(밀리초)】 ◯밀리초에 걸쳐 표시·비표시가 행해진다 【대상 요소.toggle(밀리초, 함수)】 ◯밀리초에 걸쳐 표시·비표시를 한 후에 함수를 실행할 수도 있습니다(이것 구현하지 않으므로 자세한 것은 할애) toggle은 애니메이션도 설정할 수 있습니다. 【 fast 】 : 신속하게 숨기기 【 slow 】: 천천히 숨기기 【 swing 】：디폴트의 숨겨진 스타일 【linear】：일정한 속도로 비표시로 한다 toggle 형제 여러 가지 자세한 설명은 생략합니다만, 「fadeToggle()」 , 「toggleClass()」 , 「slideToggle()」 는 자주 사용되고 싶습니다 fadetoggle()은 가만히 표시·숨기게 해 줍니다 toggleClass() 는 대상이 되는 요소의 class 속성치를 추가하거나 삭제하는 것을 반복하는 것이 가능한 메소드 slideToggle()은 특정 요소를 세로로 애니메이션하면서 표시·숨길 수 있습니다 이 근처는 프런트 실장으로 사용할 수 있을 것 같으므로 아래 사이트를 참고로 사용해 보고 싶다고 생각합니다 30분만에 이해! jQuery의 toggle()과 3가지 방법 활용술! htps //w w. 세주쿠. 네 t/bぉg/40705

요약

그러고 보니 이전에도 toggle은 뭐지? 라고 조금 조사한 적이 있었습니다. 그냥 실제로 움직일 기회가 없다면 모르겠네요. js/jQuery 서투르지만(다른 것이 좋지 않은 웃음), 역시 외형의 변화를 알기 쉽기 때문에 의도한 움직임이 되었을 때는 즐겁습니다.

끝