javascript : 모든 플러그인을 한 번에 하나씩 적용하십시오

Question

홈페이지가 있습니다. 페이지 내에 5-6 개의 동적으로 생성 된 jquery 슬라이더가 있습니다. 예를 들면.

<div id="slider1" class="slider"> 
    // images here 
</div> 

<div id="slider2" class="slider"> 
    // images here 
</div> 
....... 
....... 

슬라이더 플러그인은 이제 질문은, 같은 페이지의 마지막에로드 된 모든 슬라이더 후

$('#slider1').applyplugin(); 
$('#slider2').applyplugin(); 
..... 
..... 

적용된다 해야하는 말에 한 번에 모든 슬라이더에 적용되는 플러그인 페이지; 아래 그림과 같이 또는 내가 한에 의해 슬라이더 하나를 적용해야

<div id="slider1" class="slider"> ...... images here ..... </div> $('#slider1').applyplugin(); <div id="slider2" class="slider"> ...... images here ..... </div> $('#slider2').applyplugin(); 

더 나은 사용자 경험을 더 좋을 것이다? 아니면 다른 해결책이 있습니까?

편집 : 실수로 난, id=slider1를 쓴 한 그 당신은 정말 당신이 "더 나은 사용자 경험"을 해결하기 위해 노력하고 어떤 문제를 설명하지 않은 slider1, slider2 ...

Answer 1

? 예를 들어 한 번에 표시되는 모든 슬라이더에 더 관심이 있습니까? 다른 슬라이더 앞에 슬라이더가 표시되지 않습니까? 슬라이더가 초기화되기 전에 HTML이 표시되지 않습니까?

$("#slider1, #slider2").applyplugin(); 

또는 일반적인 클래스 이름을 사용합니다 :

$(".slider").applyplugin(); 

을 등 ...

당신은 당신의 자바 스크립트를 단순화 할 수 있습니다, .applyplugin()가 제대로 한 번에 두 개 이상의 요소를 처리하기 위해 작성된다고 가정

또한 동일한 ID로 두 개의 요소를 가질 수 없기 때문에 질문에 오타가 있다고 가정합니다. 당신이 요소들이 제대로 초기화 모든 때까지에 표시되지 않도록하려면

---

, 당신은이 작업을 수행 할 수 있습니다

<div id="slider1" class="slider" style="visibility: hidden;"> 
...... images here ..... 
</div> 

<div id="slider2" class="slider" style="visibility: hidden;"> 
...... images here ..... 
</div> 
$(".slider").css("visibility", "visible").applyplugin(); 

을이 사용자 경험을 해결하지 않는 경우 더 잘 만들려고 노력하고있는 것에 대해 더 설명해주십시오.