顯示使用按鈕/隱藏圖像 - jQuery的

我想在<button>顯示使用按鈕/隱藏圖像 - jQuery的

展示與點擊/隱藏圖像這是我的嘗試：

腳本：

<script type="text/javascript" > 
$(document).ready(function() { 
    $('#buttontest').toggle(function() { 
    $('#LogoTest').fadeOut('slow'); 
    }, function() { 
    $('#LogoTest').fadeIn('slow'); 
    }); 
}); 
</script>

HTML：

<input type="button" id="buttontest" value="Show/Hide 1"> 
<a href="image1.jpg"> 
<img src="image1.jpg" border="0" width="900" height="300" alt="image1" target="nowa_strona" id="LogoTest"> 
</a> 
<br> 
<input type="button" id="buttontest1" value="Show/Hide 2"> 
<a href="image2.jpg"> 
    <img src="image2.jpg" border="0" width="900" height="300" alt="image2" target="nowa_strona" id="LogoTest1"> 
</a> 
<br>

如何在顯示/隱藏圖片時點擊相應的<button>

來源

2013-06-06 user2458768

jqeury版本用過嗎？ –

最好的辦法是包裝在一個div元素的按鈕和圖像。在這種情況下通過它不是必要的，但通過這種方式，你一定要顯示/隱藏正確的圖像。只需在圖像中添加一個類名logotest，您可以使用類buttontest單擊按鈕時使其顯示/隱藏。

這裏是我的例子：http://jsfiddle.net/7xhxq/

來源

2013-06-06 09:25:58 user1912285

你是什麼意思？一個圖像或一個按鈕？ – user1912285

圖片將在點擊按鈕後顯示。 – user2458768

只需使用函數'toggle（）'。「toggle」（「slow」）函數會在圖像隱藏時顯示圖像，如果顯示則隱藏圖像。再看看我的例子！ – user1912285

.toggle()

這種方法簽名的jQuery 1.8已被廢棄，並在的jQuery 1.9移除。 jQuery還提供了一個名爲.toggle（）的動畫方法，用於切換元素的可見性。動畫或事件方法是否被觸發取決於傳遞的參數集合。

來源

2013-06-06 08:38:51 PSR

$('#buttontest').on("click",function(e) 
{ 
$('#LogoTest').toggle(); 
}); 

$('#buttontest1').on("click",function(e) 
{ 
$('#LogoTest1').toggle(); 
});

See Demo

希望它可以幫助你

來源

2013-06-06 08:39:59

使用下面的代碼：

$(document).ready(function() { 
    $('#buttontest').click(function() { 
     $('#LogoTest').toggle('slow'); 
    } 
});

來源

2013-06-06 08:40:03

您可以使用下面的代碼：

$(document).ready(function() { 
    $('#YourButtonID').click(function() { 
     $('#YourImageID').toggle('slow'); 
    } 
});

請注意，上面的代碼工作得很好。但我不推薦它，因爲jQuery的$(document).ready()變慢了。這裏是document for your reference。

所以，根據你的意見，你應該去替代$(document).ready()。

對於你的問題，你可以做替代代碼是這樣的：

$('#YourButtonID').on("click",function(e) 
{ 
$('#YourImageID').toggle('slow'); 
});

快樂探索:)

來源

2013-06-06 08:52:23

顯示使用按鈕/隱藏圖像 - jQuery的

回答

相關問題