0

Добрый вечер! Исходные данные: каталог товаров, каждый товар которого на странице отображается друг под другом. Есть возможность по ссылке "Раскрыть все" (или "Скрыть все", значение меняется) раскрыть все товары, а также раскрыть/скрыть каждый товар по отдельности ( с помощью текстовых ссылок [+] и [-] соответственно). Собственно код:

<script type="text/javascript">
    $(document).ready(function() {
    $('.showinfo').click(function() { //при клике на .showinfo скрываем/раскрываем блок с инфой  
    $(this).text($(this).text()=='[-]' ? '[+]' : '[-]');  
    $(this).parent().find('.productinfo').toggle('slow');
    return false;   });
    $('#show-all').click(function() { //при клике на #show-all раскрываем все блоки, меняем тексты кнопок 
    if ($('#show-all').text()=='Раскрыть все')
    {$('.productinfo').show('slow');}   
    if ($('#show-all').text()=='Скрыть все')
    {$('.productinfo').hide('slow');}   
    $(this).text($(this).text()=='Скрыть все' ? 'Раскрыть все' : 'Скрыть все');
    if ($('#show-all').text()=='Скрыть все') {$('.showinfo').text('[-]');} 
    else {$('.showinfo').text('[+]');}  
    return false;   });
    }); </script>

Проблема в следующем. Как сделать так чтобы вместо текстовых ссылок ( [+] и [-] ) вставить соответствующие картинки, да так чтобы функционал не изменился (картинки бы по клику менялись и т.д.) Буду благодарен за любой помощь. Подскажите хоть в какую сторону копать.

1
  • Я бы вообще закрыл вопрос сразу, уже отвечали на подобное!
    – Artem
    17 янв 2012 в 11:35

2 ответа 2

3

[-] и [+] в коде видите? Вместо этих значков пишите код ваших картинок.

5
  • Не совсем понял Вас. Например у меня картинка с адресом <img src="/plus.png">. Как мне привязать эту картинку к ссылке с классом ".showinfo". Одно дело через свойство .text() просто менять текст, а как в таком случае быть? 16 янв 2012 в 14:49
  • В вашем коде text(...) меняйте на html(...), чтобы теги работали, вместо [+] пишите <img src="/plus.png">, вместо [-] - <img src="/minus.png">.
    – ling
    16 янв 2012 в 14:58
  • @ling, text еще на html заменить ;) А то так и будет кодом.
    – Sh4dow
    16 янв 2012 в 15:01
  • Спасибо за совет! Поменял .text на .html, но ругается (Uncaught SyntaxError: Unexpected string) на эту строчку: if ($('#show-all').text()=='Скрыть все') {$('.showinfo').html("<img src="/img/bullet_toggle_minus.png">");} А ещё как быть в случае, когда я сравниваю $(this).text($(this).text()=='[-]' ? '[+]' : '[-]'); так? $(this).text($(this).html()=='<img src="/img/bullet_toggle_minus.png">' ? '<img src="/img/bullet_toggle_plus.png">' : '<img src="/img/bullet_toggle_minus.png">'); 16 янв 2012 в 15:55
  • Ругается из-за кавычек. Вы их либо экранируйте, либо замените одинарными. Сравнивать можно по $(this).find('img').attr('src') - искать там вхождение plus или minus.
    – ling
    17 янв 2012 в 6:42
1

А не проще ли ссылке с классом ".showinfo" прописать в css: display:inline-block и background:url(/plus.png), и при клике на нее, отслеживая текущее состояние, менять background-position?

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.