Jquery로 여러 DIV를 전환하려고 시도했습니다.

Question

저는이 기능을 잠시 작동 시키려고했습니다. 기본적으로 숨겨진 11 개의 div가 있습니다. 각각에는 팝업이 열리기로되어있는 "트리거"버튼이 있습니다. 필자는 각 특정 div에 대해 훨씬 긴 일련의 함수를 사용하여이 작업을 수행 할 수있었습니다 (결국 약 175 행의 코드가되었습니다!). 나는 똑같은 일을 할 수있는 단일 함수, 즉 트리거 1이 클릭 됨 - div 1 열림/트리거 1이 다시 클릭되고, div 1이 닫히는 등의 단일 함수로 응축하고 싶었습니다.

다음은 내 스크립트입니다. 지금

$(document).ready(function() { 

    $("[class^='ShowVehicles']").toggle(function() { 
    alert("click happened"); 
     $("[class^='HiddenVehicles']").slideDown(1000); 

      }, 
     function() { 
     $("[class^='HiddenVehicles']").slideUp(1000); 


    }); 


}); 

현재 모든 "HiddenVehicles"div가 열리고 있으므로 좀 더 구체적으로 지정해야합니다. 나는 상당히 jquery에 새로운 아이디어를 꽤 많이 가지고 있습니다. 미리 감사드립니다.

$(document).ready(function() { 

    $("div.WrapIt").toggle(

    function(){ $(".HiddenVehicles", this).slideDown(1000); 
    $("img.imgSwap" , this).attr("src","assets/images/SelectBySize/SelectBySize_HideAll.gif"); 
    }, 

    function(){ $(".HiddenVehicles", this).slideUp(1000); 
    $("img.imgSwap" , this).attr("src","assets/images/SelectBySize/SelectBySize_ShowAll.gif") 
    } 

); 

    $(".ShowEveryThing").toggle(
function() { $(".WrapIt .HiddenVehicles").slideDown(1000); 
$("img.imgSwap").attr("src","assets/images/SelectBySize/SelectBySize_HideAll.gif"); 
$("img.buttonSwap").attr("src","assets/images/SelectBySize/SelectBySize_HideBtn.gif"); 
    }, 
    function(){ $(".WrapIt .HiddenVehicles").slideUp(1000); 
    $("img.imgSwap").attr("src","assets/images/SelectBySize/SelectBySize_ShowAll.gif"); 
    $("img.buttonSwap").attr("src","assets/images/SelectBySize/SelectBySize_ShowBtn.gif"); 
    }); 

}); 

내가 래퍼 DIV를 생성하고 사업부를 클릭 할 때 함수 불을했다 : -

편집 모든 도움들 주셔서 감사합니다, 여기에 내가 해낸 솔루션입니다. 또한 일부 이미지 교환 및 모든 기능 표시가 포함되었습니다.

Answer 1

정의한 함수 내에서 특정 <div>에 대한 참조를 얻으려고합니다. 정의 된 함수 내에서 $ (this)를 사용하여 버튼에 대한 참조를 가져올 수 있어야합니다. 여기

$(".ShowVehicles").toggle(function() { 
     $(this).siblings(".HiddenVehicles").slideDown(1000); 
    }, 
    function() { 
     $(this).siblings(".HiddenVehicles").slideUp(1000); 
    } 
}); 

키 :

<div> 
    <input type="button" class="ShowVehicles" /> 
    <div class="HiddenVehicles"></div> 
</div> 

는 이제 다음과 같이 뭔가 코드를 변경할 수 있습니다 : 당신의 형식에 따라 이제

가 마크 업이 말 얻을 수 있어야합니다 siblings()에 대한 호출 인 경우 버튼에 "다음"인 모든 요소를 ​​반환하고 (이 경우 HiddenVehicles 클래스로 필터링합니다.)이 경우에는 <div>입니다. 서로 배치되는 방법에 따라 다른 jQuery traversing functions 중 하나를 사용해야 할 수도 있습니다.

Answer 2

표시/숨기기 버튼을 각각의 div에 연결해야합니다.

하나의 <LI> 요소 안에 캡슐화하거나 div를 제어하는 ​​버튼을 식별하는 공통 ID를 제공하여이 작업을 수행 할 수 있습니다.

<ul id="playground"> 
    <li> 
    <div>HELLO WORLD 1</div> 
    <button>Show/Hide 1</button> 
    </li> 
    <li> 
    <div>HELLO WORLD 2</div> 
    <button>Show/Hide 2</button> 
    </li> 
    <li> 
    <div>HELLO WORLD 3</div> 
    <button>Show/Hide 3</button> 
    </li> 
</ul> 

그리고 jQuery를 기능은 다음과 같습니다 :

당신이 결정하는 경우 JS 코드는 크게 HTML 구조가 너무 무엇인지에 따라 달라집니다

jQuery("#playground button").click(function(){ 
    $(this).closest("div").toggle() 
}) 

이 크게 다른 수 있도록 여기에

는 <LI> 예제 일부 jQuery 선택자를 조정해야합니다.

Answer 3

시도해보십시오.

<span class="header">Item1</span> 
<p style="display: none;">This is the content of item1...</p> 
<span class="header">Item2</span> 
<p style="display: none;">This is the content of item2...</p> 

---

$(".header").click(function() { $(this).next("p").slideToggle("slow"); });