JQuery 숨기기 및 표시 기능이 모든 슬라이더에서 작동하지 않습니다.

Question

슬라이더 3 개를 사용하여 첫 번째 슬라이더 텍스트 1을로드 할 때 다른 두 텍스트가 숨김으로 표시됩니다. 현명한 것처럼 나는 나머지 두 개의 슬라이더로 작성되었습니다. 그러나 작동 할 때마다 제 3의 슬라이더 만 작동합니다. 슬라이더 3 기능 만 작동합니다. 내가 코드에 대한 이해가 무엇

<script> 
$(document).ready(function() { 
    <!--- slider 1 ----> 

    $("#slide1").load("/startup.php#Screenshots", function() { 

     $(".arc111").show(); 
     $(".arc112").hide(); 
     $(".arc113").hide(); 
    }); 

    <!--- slider 2 ---->  

    $("#slide2").load("/startup.php#Screenshots/slide2", function() { 

     $(".arc112").show(); 
     $(".arc111").hide(); 
     $(".arc113").hide(); 

    }); 

    <!--- slider 3 ----> 

    $("#slide3").load("/startup.php#Screenshots/slide3", function() { 

     $(".arc113").show(); 
     $(".arc112").hide(); 
     $(".arc111").hide(); 

    }); 

}); 
</script> 



<p class="arc111"> text1</p> 
<p class="arc112"> text2</p> 
<p class="arc113"> text3</p> 

Answer 1

. 즉, slide1, slide2 및 slide3을로드합니다. 세 번째 슬라이드가 매번 표시됩니다. 코드를 변경하여 각 슬라이더의로드 이벤트를 시작하십시오. 같은 - 당신이 주석에 언급 된 사이트를 확인했다

$(document).ready(function() { 

    $(".arc111").show(); 
    $(".arc112").hide(); 
    $(".arc113").hide(); 

    $("#slide1").click(function() { 
     $("#slide1").load("/startup.php", function() { 
      $(".arc111").show(); 
      $(".arc112").hide(); 
      $(".arc113").hide(); 
     }); 
    }); 

    $("#slide2").click(function() { 
     $("#slide2").load("/startup.php", function() { 
      $(".arc112").show(); 
      $(".arc111").hide(); 
      $(".arc113").hide(); 
     }); 
    }); 

    $("#slide2").click(function() { 
     $("#slide3").load("/startup.php", function() { 
      $(".arc113").show(); 
      $(".arc112").hide(); 
      $(".arc111").hide(); 
     }); 
    }); 
}); 

편집. 내 생각에 당신이하고 싶은 것은 사용자가 다음과 이전 아이콘을 클릭하면 해당 div를 표시하고 숨기고 싶다는 것입니다.

다음 코드를 사용하십시오.

$(document).ready(function() { 

    $(".arc111").hide(); 
    $(".arc112").hide(); 
    $(".arc113").hide(); 

    $('body').on('click', '.fp-next', function() { 
     changeText(); 
    }); 

    $('body').on('click', '.fp-prev', function() { 
     changeText(); 
    }); 

    function changeText(){ 
     $(".arc112").hide(); 
     $(".arc111").hide(); 
     $(".arc113").hide(); 
     switch ($(".fp-slidesContainer .active").prop("id")) { 
      case "slide1": 
       $(".arc111").show(); 
       break; 
      case "slide2": 
       $(".arc112").show(); 
       break; 
      case "slide3": 
       $(".arc113").show(); 
       break; 
      default: 
     } 
    } 
}); 

Answer 2

읽기 시간이 페이지를로드에서, 그 다음 # Slide3에서 ... 다음 # 슬라이드 2, #의 슬라이드 1을로드하는 것이 당신이 어쩌면 당신은 것,하고 싶은,하지만 확실하지 div에 이벤트를 처리하고로드하는 것을 선호합니다. 그래서 당신은 모든 슬라이드를로드하는 $(document).ready에서

$("#slide1").click(function() { 
    $("#slide1").load(....