使用javascript和不同于最初可见的图像来更改DIV可见性。不使用按钮

Question

I've tried to keep this relatively simple and I've spent the past 6 hours trying to get this work so if someone could correct me that'd be amazing. 我试图使这一过程保持相对简单，过去6个小时我一直在努力进行这项工作，因此，如果有人可以纠正我，那就太好了。

Desired Behaviour: Clicking image 1 should make it hide, image 2 is already there, clicking image 2 should make image 1 visible again. 所需的行为：单击图像1应该使其隐藏，图像2已经存在，单击图像2应该使图像1再次可见。 The user should be able to switch between each image multiple times. 用户应该能够在每个图像之间多次切换。

I have managed to make it so that the first image is no longer visible when it is clicked and it shows a second image (which I'm using instead of a button) when the second image is clicked it should display the first image again, I've tried resetting the div but I'm not sure on what the best means would be to make it visible again. 我设法做到这一点，以使单击第一张图像时不再可见，并且单击第二张图像时它显示第二张图像（我正在使用它而不是按钮），它应该再次显示第一张图像，我已经尝试过重设div，但是我不确定最好的方法是使其再次可见。

  <!--Notice--> <div class="notice1"> <style>.notice1 { position:fixed; bottom:0%; left:0%; z-index: 2;}</style> <img class="notice1" img draggable="false" onclick="this.style.display='none';" src="URL FOR IMAGE 1" width="100%" alt=""></div> <div class="Notice2"> <style>.notice2 { position:fixed; bottom:0%; right: 0%; z-index: 1;}</style> <img class="notice2" img draggable="false" src="URL FOR IMAGE 2" width="2.5%" alt=""></div>

  <script> function changeVisibility() { document.getElementById("notice1").style.visibility = "hidden"; } function resetElement() { document.getElementById("notice2").style.visibility = "visible";> </script>

The first snippet works and the first image disappears, I just need it to show the first image again when the second one is clicked. 第一个片段有效，第一个图像消失，我只需要单击第二个图像即可再次显示第一个图像。

I'd tried to do this without scripts but I have no idea how. 我试图在没有脚本的情况下执行此操作，但我不知道如何执行。 The first image disappears but I do not understand why clicking the first image won't make it disappear again. 第一张图片消失了，但我不明白为什么单击第一张图片不会使它再次消失。 If you paste in your own image links you'll be able to see what I mean. 如果您粘贴自己的图像链接，您将能够明白我的意思。

If someone could copy my code and make the changes directly that'd be amazing. 如果有人可以复制我的代码并直接进行更改，那就太好了。 I think there's something I'm missing and I can't find anything on this website that actually uses the same method as I. 我认为我丢失了一些东西，但在此网站上找不到任何使用与我相同方法的东西。

Thanks. 谢谢。

Answer 1

You have a number of problems with your code: 您的代码有很多问题：

You've attempted to create a new tag to reset the element: 您试图创建一个新标签来重置元素：
alt="ALT TAG"> <onclick="resetElement()">
You're probably looking for an inline event handler attribute (which would still be bad practice ). 您可能正在寻找一个内联事件处理程序属性（这仍然是一个坏习惯 ）。 Ideally you should use .onclick instead. 理想情况下，您应该改用.onclick 。
Your images have an img attribute, which doesn't exist. 您的图像具有img属性，该属性不存在。
You have inline <style> tags in the <body> . 您在<body>有内联的<style>标记。 <style> must come inside <head> . <style>必须在<head>内部 。 You can validate your markup with the W3C Markup Validation Service . 您可以使用W3C标记验证服务来验证标记。
You're targeting your elements with document.getElementById() , when your elements have no ID. 你的目标与你的元素document.getElementById()当你的元素没有 ID。 They have classes, so you're probably looking for document.getElementsByClassName() . 他们有类，所以您可能正在寻找document.getElementsByClassName() 。 Note that this returns a NodeList collection of elements, so you need to access the first result with [0] . 请注意，这将返回一个NodeList元素集合，因此您需要使用[0]访问第一个结果。
You have a capital N in your declaration of Notice2 , which should be notice2 . 你有资本N在你的声明Notice2 ，这应该是notice2 。
Your resetElement() function is never called. 您的resetElement()函数永远不会被调用。 Instead, you set the display for notice1 inline (when you should be modifying the visibility ). 相反，您可以设置内联的notice1的display （当您应该修改visibility ）。
notice1 is not invisible by default. 默认情况下， notice1不是不可见的。
You apply the notice classes to both the images and their respective parents, which is very likely unintentional. 您将通知类别应用于图像及其各自的父级，这很可能是无意的。
Your two images have different width attributes, which is also very likely to be unintentional. 您的两个图像具有不同的width属性，这也很可能是无意的。
You have no toggle functionality. 您没有切换功能。 You want to swap the visibility rules when clicking on the second image. 您想在单击第二张图像时交换visibility规则。

Fixing all of that up gives you a working example, as can be seen in the following: 修复所有这些问题后，将为您提供一个可行的示例，如下所示：

 var notice1 = document.getElementsByClassName("notice1")[0]; var notice2 = document.getElementsByClassName("notice2")[0]; notice1.onclick = function() { notice1.style.visibility = "hidden"; notice2.style.visibility = "visible"; } notice2.onclick = function() { notice2.style.visibility = "hidden"; notice1.style.visibility = "visible"; }

 .notice1 { position: fixed; bottom: 0%; left: 0%; z-index: 2; } .notice2 { position: fixed; bottom: 0%; right: 0%; z-index: 1; visibility: hidden; }

 <!--Notice--> <div> <img class="notice1" draggable="false" src="http://placekitten.com/101" width="100%" alt="ALT TAG"> <img class="notice2" draggable="false" src="http://placekitten.com/102" width="100%" alt="ALT TAG"> </div>

Hope this helps! 希望这可以帮助！ :) :)

Answer 2

I might look at something like this. 我可能会看这样的东西。 First, remove the listeners from inline. 首先，从内联中删除侦听器。 then, Remove the hard-coded styles from the script (while you can do it, it will be easier to simply maintain a class than to toggle individual styles). 然后，从脚本中删除硬编码的样式（虽然可以做到，但是维护一个类比切换单个样式会容易得多）。 Adding the listeners by script is going to be easier to debug and edit. 通过脚本添加侦听器将更易于调试和编辑。 And have the listener's callback do whatever toggling you might need. 并让侦听器的回调执行您可能需要的任何切换。 Try this one! 试试这个！

 var notice1 = document.getElementsByClassName("notice1")[0]; var notice2 = document.getElementsByClassName("notice2")[0]; notice1.addEventListener("click", function(){ notice1.classList.add("hidden"); notice2.classList.remove("hidden"); }) notice2.addEventListener("click", function(){ notice2.classList.add("hidden"); notice1.classList.remove("hidden"); });

 .notice1 { position: fixed; bottom: 0%; left: 0%; z-index: 2; } .notice2 { position: fixed; bottom: 0%; right: 0%; z-index: 1; } .hidden { display: none; }

 <!--Notice--> <div> <img class="notice1" draggable="false" src="http://placekitten.com/101" width="100%" alt="ALT TAG"> <img class="notice2" draggable="false" src="http://placekitten.com/102" width="100%" alt="ALT TAG"> </div>

Answer 3

First I highly recommmend reading Decoupling Your HTML, CSS, and JavaScript . 首先，我强烈建议阅读Decoupling Your HTML，CSS和JavaScript 。

If I were to write this, it would be reusable and not limited to only 2 (of anything, could be div's, forms, whatever who cares). 如果我要编写此代码，它将是可重用的，并且不仅限于2个（可以是div的形式，任何形式，无论谁在乎）。

 $(document).ready(() => { var cssIsHidden = 'is-hidden'; $(".js-rotate").each((i,e) => { var $parent = $(e); $parent.find('.is-rotating') .addClass(cssIsHidden) .on('click', (e) => { var $rotate = $(e.currentTarget); $rotate.addClass(cssIsHidden); var next = $rotate.data('rotate-next'); var $next = $parent.find(next); $next.removeClass(cssIsHidden); }); var initial = $parent.data('rotate-first'); $(initial).removeClass(cssIsHidden); }); });

 .is-hidden{ display: none; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="js-rotate" data-rotate-first=".ro-1"> <img class="ro-1 is-rotating" draggable="false" src="http://placekitten.com/101" data-rotate-next=".ro-2"> <img class="ro-2 is-rotating" draggable="false" src="http://placekitten.com/102" data-rotate-next=".ro-1"> </div>

Now you could pretty much add as many images (or any other element you want) in any number of locations: 现在，您几乎可以在任意数量的位置中添加尽可能多的图像（或所需的任何其他元素）：

 // Same exact code as above | no changes $(document).ready(() => { var cssIsHidden = 'is-hidden'; $(".js-rotate").each((i,e) => { var $parent = $(e); $parent.find('.is-rotating') .addClass(cssIsHidden) .on('click', (e) => { var $rotate = $(e.currentTarget); $rotate.addClass(cssIsHidden); var next = $rotate.data('rotate-next'); var $next = $parent.find(next); $next.removeClass(cssIsHidden); }); var initial = $parent.data('rotate-first'); $(initial).removeClass(cssIsHidden); }); });

 .is-hidden{ display: none; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> Multiple Images: <div class="js-rotate" data-rotate-first=".ro-1"> <img class="ro-1 is-rotating" draggable="false" src="http://placekitten.com/101" data-rotate-next=".ro-2"> <img class="ro-2 is-rotating" draggable="false" src="http://placekitten.com/102" data-rotate-next=".ro-3"> <img class="ro-3 is-rotating" draggable="false" src="http://placekitten.com/103" data-rotate-next=".ro-4"> <img class="ro-4 is-rotating" draggable="false" src="http://placekitten.com/104" data-rotate-next=".ro-1"> </div> Just two, but independant of the first set: <div class="js-rotate" data-rotate-first=".ro-1"> <img class="ro-1 is-rotating" draggable="false" src="http://placekitten.com/101" data-rotate-next=".ro-2"> <img class="ro-2 is-rotating" draggable="false" src="http://placekitten.com/102" data-rotate-next=".ro-1"> </div>

使用javascript和不同于最初可见的图像来更改DIV可见性。不使用按钮

问题描述

3 个解决方案

解决方案1
3 已采纳 2017-12-20 20:53:15

解决方案2
1 2017-12-20 21:10:00

解决方案3
0 2017-12-20 21:34:53

使用javascript和不同于最初可见的图像来更改DIV可见性。 不使用按钮

问题描述

3 个解决方案

解决方案1 3 已采纳 2017-12-20 20:53:15

解决方案2 1 2017-12-20 21:10:00

解决方案3 0 2017-12-20 21:34:53

使用javascript和不同于最初可见的图像来更改DIV可见性。不使用按钮

解决方案1
3 已采纳 2017-12-20 20:53:15

解决方案2
1 2017-12-20 21:10:00

解决方案3
0 2017-12-20 21:34:53