Попытка переключить несколько DIV с помощью JQuery

Question

Я пытался заставить эту функцию работать некоторое время. У меня есть 11 разных div, которые по умолчанию скрыты. Каждый из них имеет кнопку «триггер», которая должна заставить их открыться. Я смог сделать это с гораздо более длинной серией функций для каждого конкретного div (в итоге это было около 175 строк кода!). Я хотел сконденсировать его в одну функцию, которая будет делать то же самое, т. Е. Щелкнет триггер 1 - открывается один раз/триггер 1, div 1 закрывается и т. Д. И т. Д.

Вот мой сценарий с now

$(document).ready(function() { 

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

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


    }); 


}); 

В настоящее время в нем открыты все «HiddenVehicles» divs, и мне нужно сделать его более конкретным. Я довольно новичок в jquery, поэтому у меня довольно много идей. Спасибо заранее, ребята!

Edit - Спасибо за помощь, ребята, вот решение, которое я придумал:

$(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). В зависимости от вашего форматирования теперь вы должны быть в состоянии получить

Произнесите разметка:

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

Теперь Вы можете изменить свой код, чтобы что-то вроде следующего:

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

Ключ здесь это вызов siblings(), это вернет все элементы, которые являются «рядом» с кнопкой (а затем фильтруют по классу HiddenVehicles), что в данном случае является вашим <div>. В зависимости от того, как они расположены друг к другу, вам может понадобиться использовать один из других jQuery traversing functions.

Answer 2

Вам нужно как-то связать кнопки «показать/скрыть» своим соответствующим div, чтобы они действовали.

Вы можете сделать это, инкапсулируя их внутри одного элемента <LI> или указав им общие идентификаторы, чтобы определить, какая кнопка управляет, какой div.

Вот <LI> пример:

<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 будет:

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

код JS в значительной степени зависит от того, что ваш HTML структура поэтому, если вы решите сделать это значительно отличаться то некоторые из селекторов 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"); });