>source

나는 인포그래픽 슬라이더를 만들고 있는데 클릭하면 텍스트를 보여주는 버튼이 있습니다. 다음 슬라이더로 이동한 다음 이전 버튼을 누르고 뒤로 돌아가면 내 토글이 텍스트를 표시한 다음 보이지 않게 되돌아옵니다.

여기에 일부 code가 있습니다... 각 버튼을 누르고 있는 CSS 또는 Javascript div를 재설정해야 하는지 잘 모르겠습니다. 토글 문제를 해결할 수 있는 방법을 알려주세요.

$( "#point1" ).click(function() {
        $( "#timeline1" ).toggle( "slow", function() {
          //Animation complete.
        });
      });
      $( "#point2" ).click(function() {
        $( "#timeline2" ).toggle( "slow", function() {
          //Animation complete.
        });
      });
      $( "#point3" ).click(function() {
        $( "#timeline3" ).toggle( "slow", function() {
          //Animation complete.
        });
      });
      $( "#point4" ).click(function() {
        $( "#timeline4" ).toggle( "slow", function() {
          //Animation complete.
        });
      });
      $( "#point5" ).click(function() {
        $( "#timeline5" ).toggle( "slow", function() {
          //Animation complete.
        });
      });

#point1 {
    position: absolute;
    top: 20%;
    left: 8%;
    transform: translate(-50%, -50%);
    width: 45px;
    cursor: pointer;
}

<img src="img/SVG/point1.svg" alt="fact" id="point1" class="point"/>           <img src="img/SVG/point2.svg" alt="fact" id="point2" class="point"/>           <img src="img/SVG/point3.svg" alt="fact" id="point3"class="point" />           <img src="img/SVG/point4.svg" alt="fact" id="point4"class="point" />           <img src="img/SVG/point5.svg" alt="fact" id="point5" class="point"/>

버튼을 마지막으로 누른 타임라인이 아닌 다른 타임라인을 사라지게 하시겠습니까? 구조를 이해하려면 더 많은 HTML이 필요합니다. "로컬"에 스니펫을 실행하는 데 필요한 라이브러리가 없는 경우 링크와 같은 "외부 스니펫 편집기" 리소스를 사용하여 code를 공유할 수도 있습니다.

Vladimir2022-02-03 13:36:13

관련 html을 공유해 주세요. 귀하가 제공한 버튼에 아무 버튼도 표시되지 않습니다.

ruleboy212022-02-03 13:36:13

@Vladimir 내 웹사이트를 방문하면 더 나은 컨텍스트를 위해 프로젝트를 볼 수 있습니다. .. 대화형 인포그래픽이라고 합니다. 내 웹사이트는 hannahblue.ca입니다.

Hannah de Guzman2022-02-03 13:36:13

@ruleboy21 내 웹사이트를 방문하면 더 나은 컨텍스트를 위해 프로젝트를 볼 수 있습니다. 인터랙티브 인포그래픽이라고 합니다. 내 웹사이트는 hannahblue.ca입니다.

Hannah de Guzman2022-02-03 13:36:13
  • 답변 # 1

    jquery를 사용해야 합니다..끄다()추가하기 전에 이전 클릭 이벤트 핸들러를 제거하는 메소드.딸깍 하는 소리()~로#포인트들. 이 code를 사용해보십시오

    $( "#point1" ).off('click').click(function() {
        $( "#timeline1" ).toggle("slow");
    });
    $( "#point2" ).off('click').click(function() {
        $( "#timeline2" ).toggle("slow");
    });
    $( "#point3" ).off('click').click(function() {
        $( "#timeline3" ).toggle("slow");
    });
    $( "#point4" ).off('click').click(function() {
        $( "#timeline4" ).toggle("slow");
    });
    $( "#point5" ).off('click').click(function() {
        $( "#timeline5" ).toggle("slow");
    });
    

  • 이전 ubuntu : wxformbuilder를 컴파일할 수 없습니다(우분투 20.04.3).
  • 다음 postgresql : plpgsql 트리거는 존재하지 않을 때 값을 존재하는 것으로 표시합니다.