показать/скрыть изображения с помощью кнопок - JQuery

Question

Я хочу, чтобы показать/скрыть изображения с помощью мыши на <button>

Это то, что я пробовал:

Сценарий:

<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>

Answer 1

лучших способов обернуть кнопку и изображение в сНу элемента. В этом случае это не обязательно, но таким образом вы всегда уверены, что нужно показать/скрыть правильное изображение. Просто добавьте имя класса logotest на изображение, вы можете заставить его показать/скрыть при нажатии кнопки с классом buttontest.

Это мой пример: http://jsfiddle.net/7xhxq/

Answer 2

.toggle()

Этот метод был подписи устаревшим в JQuery 1.8 и удален в JQuery 1.9. jQuery также предоставляет метод анимации с именем .toggle() , который переключает видимость элементов. Независимо от того, запущена ли анимация или метод , зависит от набора переданных аргументов.

Answer 3

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

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

See Demo

Надежда Это помогает вам

Answer 4

Используйте следующий код:

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

Answer 5

Вы можете использовать следующий код:

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

Обратите внимание, что приведенный выше код работает превосходно. Но я не рекомендую его, так как $(document).ready() jQuery замедляется. Вот document for your reference.

Итак, в соответствии с этим вы должны пойти с альтернативой для $(document).ready().

Для вашего вопроса, вы можете сделать альтернативный код что-то вроде:

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

Happy Исследуя :)