如何交換圖像

當用戶點擊鏈接展開圖像時，是否有辦法交換圖像？如何交換圖像

<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'); 
})

來源

2016-07-16 Pedro

Pedro，正在尋找類似這樣的東西 - http://codepen.io/nagasai/pen/kXvdyQ –

@NagaSaiA謝謝你，這是一個非常簡單的完美 – Pedro

您可以更改圖像的src屬性的值。或者您可以將這些圖像作爲背景顯示。然後，您可以通過更改課程來切換這些圖像。

您可以如下更改src屬性的值;

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

否則，你可以使它們的背景圖像如下;

style;

.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'); 
});

我希望這可以工作。

來源

2016-07-16 21:36:29

非常感謝朋友 – Pedro

只需使用CSS：

img { 
    opacity: 1; 
} 

img:hover { 
    opacity: 0; 
}

當不透明度設置爲0，圖像變得隱藏，這樣你可以看到段落的文字。

來源

2016-07-16 21:30:33

實現你預期的效果，請使用以下選項

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

來源

2016-07-16 22:10:08

謝謝@Pedro :) –

如何交換圖像

回答

相關問題