2012-08-23 2 views
0

У меня есть этот код, который на самом деле не работаетJQuery различные выборы от этого нажмите

Сначала я добавить IMG DIV

$('div.group_title a').prepend("<img src='replace_w_img_link_in_real' width='20' height='20' >"); 

Тогда я сделать выбор этого DIV

$('.el.group_title a img').on('click', function(e){ 
    e.preventDefault(); 
    var img2 = "img_link_path_2"; 
    var img1 = "img_link_path_1"; 

    var img = $(this).attr("src"); 

    if (img == img1) { 
    $(this).attr("src",img2); 
    } else { 
    $(this).attr("src",img1); 
    } 

    $(this).nextUntil('.el.group_title', '.sidebar_project').toggle(); 
}); 

Проблема в том, что $('.el.group_title a img') просто возвращает выделение, и когда я делаю $(this).nextUntil('.el.group_title', '.sidebar_project').toggle(); Я не могу найти div.

Итак, идея состоит в том, что он добавляет img div, и когда вы нажимаете этот img, img меняет и скрывает/показывает содержимое .sidebar_project до следующего img. Я пытался изменить $(this).nextUntil('.el.group_title a img', но не повезло

По запросу это основа HTML

<div class="el group_title"> 
    <a href="link_path">NAME</a> 
</div> 
<div data-project-id="195677" class="sidebar_project">..</div> 
<div data-project-id="9844" class="sidebar_project">..</div> 
<div class="el group_title"> 
    <a href="link_path">NAME 2</a> 
</div> 
<div data-project-id="195677" class="sidebar_project">..</div> 
<div data-project-id="9844" class="sidebar_project">..</div> 

Теперь, когда я добавляю IMG Див

<div class="el group_title"> 
    <a href="link"> 
    <img alt="ACME org" src="link" width="20" height="20">org name</a> 
</div> 
.... 

Вот jsFiddle ->http://jsfiddle.net/6fdMc/

+0

Вы можете разместить образец HTML, который вы получите после добавления? – Samich

+1

Создание jsfiddle было бы отличной идеей, было бы легче увидеть, в чем проблема. – sQVe

+0

Обновлен w кодом, который я получаю – Nonyck

ответ

0

Трудно сказать, что именно вы пытаетесь сделать, но похоже, что часть решения будет равна $(this).closest(".group_title"). Вы пытаетесь что-то сделать like this? Это та часть, что я изменил в своем коде:

Оригинал:

$(this).nextUntil('.el.group_title', '.sidebar_project').toggle(); 

Новое:

$(this).closest(".group_title") 

    .nextUntil(".group_title", ".sidebar_project").toggle(); 
+0

Работает отлично, это то, что я хотел, почему не работал мой код? – Nonyck

+0

В вашем коде 'this' будет элемент' img'. 'nextUntil()' выбирает братьев и сестер элемента, а элементы '.sidebar_project', которые вы хотите выбрать, не являются братьями и сестрами элемента' img'. Чтобы выбрать нужные элементы, начиная с 'img', я использовал' ближайший() 'для выбора элемента' .group_title', который содержит 'img', а затем выбрал элементы' .sidebar_project', которые являются братьями и сестрами этого ' .group_title'. – JMM

Смежные вопросы