Как поменять картинку

Question

Есть ли способ поменять изображение, когда пользователь нажимает на ссылку, чтобы развернуть коннект на нем.

<ul class="accor"> 
    <li> Item 1 <img src="../plus.png"> 
     <p> Lorem ipsum dolor sit amet</p> 
    </li> 
</ul> 

$('.accor li').click(function() { 
    $(this).find('p').slideToggle('fast'); 
}) 

Answer 1

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

Вы можете изменить значение атрибута src следующим образом;

$('img').attr('src', 'newImageUrl');

В противном случае вы можете сделать их фоновым изображением следующим образом;

стиль;

.icon { 
    display: inline-block; 
} 

.first-image { 
    background: url('../plus.png'); 
    width: 20px; 
    height: 20px; 
} 

.second-image { 
    background: url('../image-2.png'); 
    width: 20px; 
    height: 20px; 
} 

Кстати, вам нужно обновить значения высоты и ширины этих классов по вашим изображениям.

html;

<ul class="accor"> 
    <li> Item 1 <span class="icon first-image"></span> 
     <p> Lorem ipsum dolor sit amet</p> 
    </li> 
</ul> 

С последним решением вам необходимо сменить класс на javascript;

$('.accor li').click(function() { 
    var $icon = $(this).find('.icon'); 

    if ($icon.hasClass('first-image') { 
    $icon.removeClass('first-image').addClass('second-image'); 
    } else { 
    $icon.removeClass('second-image').addClass('first-image'); 
    } 

    $(this).find('p').slideToggle('fast'); 
}); 

Надеюсь, это сработает.

Answer 2

Вы можете использовать только CSS:

img { 
    opacity: 1; 
} 

img:hover { 
    opacity: 0; 
} 

Когда непрозрачность установлена ​​значением 0, изображение стало скрытым, таким образом, вы можете увидеть текст абзаца.

Answer 3

Для достижения вашего ожидаемого результата, используйте ниже вариант

HTML:

<ul class="accor"> 
    <li> Item 1 <img src="http://www.w3schools.com/css/img_fjords.jpg"> 
     <img src="http://www.w3schools.com/css/img_forest.jpg" width="60px" height="60px" style="display:none"/> 
     <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
    </li> 
</ul> 

CSS:

img{ 
    width:100px; 
    height:100px 
} 

JS:

$('.accor li').click(function() 
    { 
     $(this).find('p').slideToggle('fast'); 
     $(this).find('img').toggle(); 
    }) 

Codepen- http://codepen.io/nagasai/pen/kXvdyQ