Открыть / Закрыть иконки

Question

Я делаю некоторые шеннаниганы с jQuery, чтобы разместить рядом с моими экспандерами маленькие значки плюс / минус Это похоже на деревья файлов Windows или расширители кода Firebugs.

Это работает, но не достаточно конкретно.

Надеюсь, это имеет смысл ...

$('div.toggle').hide();//hide all divs that are part of the expand/collapse
$('ul.product-info li a').toggle(function(event){
  event.preventDefault();
  $(this).next('div').slideToggle(200);//find the next div and sliiiide it
  $('img.expander').attr('src','img/content/info-close.gif');//this is the part thats not specific enough!!!
},function(event) { // opposite here
  event.preventDefault();
  $(this).next('div').slideToggle(200);
  $('img.expander').attr('src','img/content/info-open.gif');
});


<ul class="product-info">
  <li>
    <a class="img-link" href="#"><img class="expander" src="img/content/info-open.gif" alt="Click to exand this section" /> <span>How it compares to the other options</span>
  </a>
  <div class="toggle"><p>Content viewable when expanded!</p></div>
  </li>
</ul>

На странице есть множество тегов $('img.expander'), но я должен быть конкретным. Я попробовал функцию next () (как я использовал, чтобы найти следующий div), но он говорит, что она не определена. Как я могу найти свой конкретный тег img.expander? Спасибо.

РЕДАКТИРОВАТЬ, обновленный код в соответствии с решением Дугласа:

$('div.toggle').hide();
            $('ul.product-info li a').toggle(function(event){
                //$('#faq-copy .answer').hide();
                event.preventDefault();
                $(this).next('div').slideToggle(200);
                $(this).contents('img.expander').attr('src','img/content/info-close.gif');
                //alert('on');
            },function(event) { // same here
                event.preventDefault();
                $(this).next('div').slideToggle(200);
                $(this).contents('img.expander').attr('src','img/content/info-open.gif');
            });

Answer 1

$(this).contents('img.expander')

Это то, что вы хотите. Он выберет все узлы, которые являются дочерними элементами вашего списка. В вашем случае все ваши изображения вложены в элемент списка, так что это отфильтрует только то, что вы хотите.

Answer 2

Как насчет создания события click для переключения класса CSS на родительский элемент (в вашем случае, возможно, ul.product-info). Затем вы можете использовать свойства фона CSS, чтобы изменить фоновое изображение для вместо использования литерала и попытки манипулирования с src. Вы также сможете показать и скрыть свои div.toggle.

ul.product-info.open span.toggler {
   background-image: url( "open-toggler.png" );
}
ul.product-info.closed span.toggler {
   background-image: url( "closed-toggler.png" );
}

ul.product-info.open div.toggle {
   display: block;
}
ul.product-info.closed div.toggle {
   display: hidden;
}

Использование функций навигации / паутинга jQuery может быть медленным, когда в DOM много элементов и глубокая вложенность. С помощью CSS ваш браузер будет рендерить и изменять вещи быстрее.

Answer 3

Вы пробовали метод .siblings ()?

$(this).siblings('img.expander').attr('src','img/content/info-close.gif');