使用 jquery 切换图像

Question

I am working on a project where images move to each corner of the screen on button presses. I need these images to toggle from hidden to shown.

To do this I am using toggle() but the issue is that I need the ones that are showing to stay showing until toggled off. Currently when I click one it will show, but if I click another then the one previously shown will disappear and the one I clicked will show; only one image will show at a time. Any suggestions would be helpful.

 $(document).ready(function() { var img = $('#MyImage'); $('#NWest').on('click', function() { img.css({ top: '0px', left: '0px', position: 'absolute' }); $("img").toggle(); }); }); $(document).ready(function() { var text = $('#MyText'); $('#NWest').on('click', function() { text.css({ top: '150px', left: '245px', position: 'absolute' }); }); }); $(document).ready(function() { var img = $('#MyImage'); $('#NEast').on('click', function() { img.css({ top: '0px', left: '75%', position: 'absolute' }); $("img").toggle(); }); }); $(document).ready(function() { var text = $('#MyText'); $('#NEast').on('click', function() { text.css({ top: '150px', left: '88%', position: 'absolute' }); }); }); $(document).ready(function() { var img = $('#MyImage'); $('#SEast').on('click', function() { img.css({ top: '560px', left: '75%', position: 'absolute' }); $("img").toggle(); }); }); $(document).ready(function() { var text = $('#MyText'); $('#SEast').on('click', function() { text.css({ top: '710px', left: '88%', position: 'absolute' }); }); }); $(document).ready(function() { var img = $('#MyImage'); $('#SWest').on('click', function() { img.css({ top: '560px', left: '0px', position: 'absolute' }); $("img").toggle(); }); }); $(document).ready(function() { var text = $('#MyText'); $('#SWest').on('click', function() { text.css({ top: '710px', left: '245px', position: 'absolute' }); }); });

 .container { position: relative; top: 0%; left: 0%; color: white; font-size: 20px; top: 30px; } .text { max-width: 20ch; position: absolute; top: 150px; left: 245px; transform: translate(-50%, -50%); } img { filter: grayscale(100%); }

 <input type="button" value="North West" id="NWest"> <input type="button" value="North East" id="NEast"> <input type="button" value="South East" id="SEast"> <input type="button" value="South West" id="SWest"> <a href='http://cis337-0217.cisdprogram.com/Index.html'>Return to Index</a><br> <div class="container"> <img id="MyImage" src="MyImage.jpg" alt="MyImage" style="width:25%" ;> <div class="text" id="MyText"> Lines of text. Lines of text. Lines of text. Lines of text. Lines of text. Lines of text. Lines of text. </div> </div> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

Answer 1

You need to act on the visibility style.

• Put 4 images in your HTML.
• Give them a class in your CSS for the position.
• For each element, you need to toggle, you can use this homemade function toggleImageVisible().

The following snippet work for 2 buttons:

 $(document).ready(function() { $('#NWest').on('click', function() { toggleImageVisible('MyImageA'); }); $('#NEast').on('click', function() { toggleImageVisible('MyImageB'); }); }); function toggleImageVisible(id) { var img = document.getElementById(id); img.style.visibility = (img.style.visibility === 'visible' ? 'hidden': 'visible'); }

 .container { position: relative; top: 0%; left: 0%; color: white; font-size: 20px; top: 30px; } .text { max-width: 20ch; position: absolute; top: 150px; left: 245px; transform: translate(-50%, -50%); } img { filter: grayscale(100%); } .MyImageClassA{ top: 0px; left: 0px; position: absolute; visibility: hidden; } .MyImageClassB{ top: 0px; left: 75%; position: absolute; visibility: hidden; }

 <input type="button" value="North West" id="NWest"> <input type="button" value="North East" id="NEast"> <input type="button" value="South East" id="SEast"> <input type="button" value="South West" id="SWest"> <a href='http://cis337-0217.cisdprogram.com/Index.html'>Return to Index</a><br> <div class="container"> <img id="MyImageA" class="MyImageClassA" src="MyImage.jpg" alt="MyImage" style="width:25%" ;> <img id="MyImageB" class="MyImageClassB" src="MyImage.jpg" alt="MyImage" style="width:25%" ;> <div class="text" id="MyText"> Lines of text. Lines of text. Lines of text. Lines of text. Lines of text. Lines of text. Lines of text. </div> </div> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>