.click() 함수가 올바르지 않습니다.

Question

커뮤니티의 규칙을 위반하지 않고 가능한 한 구체적으로하려고하므로이 포럼이 처음입니다. Flippy jQuery 플러그인을 사용하는 갤러리를 개발하려고합니다. 이미 잘 작동하는 플러그인을 설치했습니다. 지금 달성하고자하는 것은 특정 div에 이벤트를 트리거하는 버튼을 지정하여 해당 div의 다른 div에 반복되는 것을 보지 않는 방법을 찾는 것입니다.

이 링크 here에서 각 녹색 버튼이 파란색 상자 각각에 대해 Flippy 이벤트를 호출하는 방법을 볼 수 있습니다. 문제는 내가 녹색 상자를 클릭하면 Flippy 플러그인이 호출되고 모든 파란색 상자가 한 번에 영향을 받는다는 점이다. 이는 내가 원하는 바가 아니다. 초록색 상자 번호 하나가 파란색 상자 번호 하나를 호출하도록하려면 어떻게해야합니까? 지금 나는 이것이 자바 스크립트와 관련이 있다는 것을 이해하지만 문제가 어디에 있는지 정말로 알 수 없다. 너희들이 저를 도울 수 있기를 바랍니다.

대단히 감사합니다!

<script type="text/javascript"> 
    $(document).ready(function(){ 
     $(".boxlink").click(function(){ 
      $(".box").flippy({ 
       color_target: "red", 
       direction: "RIGHT", 
       duration: "500", 
       noCSS: "true" 
      }); 
     }); 
    }); 

    $(".box").flippyReverse(); 
</script> 

<div class="flipboxcontainer"> 
    <div class="boxcontainer"> 
     <div class="box" id="1"></div> 
     <div class="box" id="2"></div> 
     <div class="box" id="3"></div> 
     <div class="box" id="4"></div> 
    </div> 
</div> 

<div class="actionbuttons-btn"> 
    <div class="boxlink"></div> 
    <div class="boxlink"></div> 
    <div class="boxlink"></div> 
    <div class="boxlink"></div> 
</div> 

Answer 1

, 당신의 flippyReverse 함수에서 해당 인덱스에있는 상자에

$(document).ready(function() { 
    var $boxes = $(".box"); 
    var $links = $(".boxlink").click(function() { 
     var index = $links.index(this); 
     $boxes.eq(index).flippy({ 
      color_target: "red", 
      direction: "RIGHT", 
      duration: "500", 
      noCSS: "true" 
     }); 
    }); 
}); 
//you may have to move this to dom ready handler 
$(".box").flippyReverse(); 

Answer 2

을 boxlink을 클릭 한 후 초기화 플리 피 (flippy)의 인덱스를 가져옵니다 같은 정의 : 여기

내 코드입니다 css를 flippy으로 설정하십시오.
색상을 "blue"로 변경하십시오.

Answer 3

id 속성에 숫자 값만 사용하는 것이 좋지만 권장하지 않습니다.

<div class="flipboxcontainer"> 
    <div class="boxcontainer"> 
     <div class="box" id="box_1"></div> 
     <div class="box" id="box_2"></div> 
     <div class="box" id="box_3"></div> 
     <div class="box" id="box_4"></div> 
    </div> 
</div> 

<div class="actionbuttons-btn"> 
    <div class="boxlink" id="link_1"></div> 
    <div class="boxlink" id="link_2"></div> 
    <div class="boxlink" id="link_3"></div> 
    <div class="boxlink" id="link_4"></div> 
</div> 

을 그리고 클릭 이벤트 : 오른쪽 상자에 링크를 확인하려면 모든 요소의 id를 사용

$(document).ready(function(){ 
    $(".boxlink").click(function(){ 
     var id = $(this).attr('id').substring(5); 
     $('#box_'+id).flippy({ 
      color_target: "red", 
      direction: "RIGHT", 
      duration: "500", 
      noCSS: "true" 
     }); 
    }); 
}); 

$(".box").flippyReverse();