jQuery를 : 번호 요소를 통해주기와이 요소 숨기기/토글 다음/이전 버튼을

Question

내가 다음/이전 버튼을 만들려고 노력하고 보여 그 타임 라인에 데이터 포인트를 통해 순환합니다. 데이터 포인트에 해당하는 모든 다른 창에서 상자 숨겨진 시작하지만 내 목표는 아래쪽 화살표/위쪽 화살표를 클릭하고이 페이지 스크롤을 각 데이터 포인트에 연대순으로하고 해당 다른 창에서 상자를 열 수있을 것입니다.

현재 각각 다른 창에서 상자가 나 타임 라인에 각 데이터 포인트를 대상으로 타임 라인에있는 데이터 포인트를 클릭시 해당 다른 창에서 상자를 엽니 다 어떻게 해당 번호가 표시되어 있습니다. 그 코드는 다음과 같습니다 다음 이전/다음 버튼을 각각의 데이터 포인트를 스크롤하고 자신의 상자를 열 수 있도록

 $('.datapoint').click(function() { 
     var popout = $(this).data('popout'); 
     $(".popout-" + popout).fadeToggle(); 
    }); 

그래서 내가 필요한 것은. 각 클릭에 대해 더하거나 뺄 카운터 변수를 만든 다음 해당 변수를 사용하여 위의 코드와 비슷한 각 데이터 포인트를 대상으로 삼았습니다. 그러나 어떤 작업을하려면 고심하고 있습니다.

는 여기에 지금까지 시도 내용은 다음과 같습니다

var count = 0; 

$('.timeline-scroller-down').click(function (e) { 
    count++; 
    e.preventDefault(); 
    scrollToElement(".popout-" + count); 
}); 

감사합니다!

Answer 1

당신은,이 목적을 위해 jQuery UI에서 대화 상자를 사용하여 하나 개의 데이터 포인트에 대한 하나의 대화 상자를 만들 수 있습니다. 또한 jQuery 대화 상자가 많아지면서 각 대화 상자에 고유 한 ID를 할당한다고 덧붙이고 싶습니다. 그런 다음 $ ("# popup1")을 사용하여 대화 상자를 표시 할 수 있습니다.

또한, 이러한 모든 대화 상자에 클래스를 할당합니다. 클래스가 "dialogBox"라고합니다. 따라서 대화 상자를 표시하기 전에 이미 표시된 모든 대화 상자를 닫아야합니다. 그래서 스크립트는 다음과 같습니다

$('.datapoint').click(function() { 
$(".dialogBox").dialog("close"); 
var popout = $(this).data('popout'); 
$("#popup-" + popout).dialog(); 
}); 

그리고 버튼을 아래로 스크롤에 클릭 이벤트가 될 것이다 :

var count = 0; 

$('.timeline-scroller-down').click(function (e) { 
$(".dialogBox").dialog("close"); 
count++; 
e.preventDefault(); 
$("#popup-" + count).dialog(); 
}); 

편집 : 여기

이의 jQuery UI를 사용하지 않는 간단한 구현입니다 . 각 데이터 포인트에 대해 하나의 팝업 상자를 만듭니다. 각 팝업 상자에 고유 ID를 할당하십시오. 그런 다음, 또한

$("#popup-1").fadeToggle(); 

사용하여 팝업 상자를 표시 이러한 모든 대화 상자에 클래스를 할당 할 수 있습니다. 클래스가 "popupBox"라고합니다. 따라서 대화 상자를 표시하기 전에 이미 표시된 모든 대화 상자를 닫아야합니다. 그래서 스크립트는 다음과 같습니다

$('.datapoint').click(function() { 
$(".popupBox").fadeOut(); 
var popout = $(this).data('popout'); 
$("#popup-" + popout).fadeToggle(); 
}); 

그리고 아래로 스크롤 버튼의 클릭 이벤트는 다음과 같습니다

var count = 0; 

$('.timeline-scroller-down').click(function (e) { 
$(".popupBox").fadeOut(); 
count++; 
e.preventDefault(); 
$("#popup-" + count).fadeToggle(); 
}); 

만 jQuery를 사용하여 수행 할 수없는보기에 팝업을 scoll하십시오. 요소를보기로 스크롤하는 데 this jQuery plugin을 사용할 수 있습니다.