使用javascript和不同於最初可見的圖像來更改DIV可見性。 不使用按鈕
[英]Changing DIV visibility using javascript and a different image than was initially visible. Not using buttons
問題描述
我試圖使這一過程保持相對簡單，過去6個小時我一直在努力進行這項工作，因此，如果有人可以糾正我，那就太好了。
所需的行為：單擊圖像1應該使其隱藏，圖像2已經存在，單擊圖像2應該使圖像1再次可見。 用戶應該能夠在每個圖像之間多次切換。
我設法做到這一點，以使單擊第一張圖像時不再可見，並且單擊第二張圖像時它顯示第二張圖像（我正在使用它而不是按鈕），它應該再次顯示第一張圖像，我已經嘗試過重設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>
第一個片段有效，第一個圖像消失，我只需要單擊第二個圖像即可再次顯示第一個圖像。
我試圖在沒有腳本的情況下執行此操作，但我不知道如何執行。 第一張圖片消失了，但我不明白為什么單擊第一張圖片不會使它再次消失。 如果您粘貼自己的圖像鏈接，您將能夠明白我的意思。
如果有人可以復制我的代碼並直接進行更改，那就太好了。 我認為我丟失了一些東西，但在此網站上找不到任何使用與我相同方法的東西。
謝謝。
3 個解決方案
解決方案1
3 已采納 2017-12-20 20:53:15
您的代碼有很多問題：
- 您試圖創建一個新標簽來重置元素：
alt="ALT TAG"> <onclick="resetElement()">
您可能正在尋找一個內聯事件處理程序屬性（這仍然是一個壞習慣 ）。 理想情況下，您應該改用.onclick。 - 您的圖像具有
img屬性，該屬性不存在。 - 您在
<body>有內聯的<style>標記。<style>必須在<head>內部 。 您可以使用W3C標記驗證服務來驗證標記。 - 你的目標與你的元素
document.getElementById()當你的元素沒有 ID。 他們有類，所以您可能正在尋找document.getElementsByClassName()。 請注意，這將返回一個NodeList元素集合，因此您需要使用[0]訪問第一個結果。 - 你有資本
N在你的聲明Notice2，這應該是notice2。 - 您的
resetElement()函數永遠不會被調用。 相反，您可以設置內聯的notice1的display（當您應該修改visibility）。 - 默認情況下，
notice1不是不可見的。 - 您將通知類別應用於圖像及其各自的父級，這很可能是無意的。
- 您的兩個圖像具有不同的
width屬性，這也很可能是無意的。 - 您沒有切換功能。 您想在單擊第二張圖像時交換
visibility規則。
修復所有這些問題后，將為您提供一個可行的示例，如下所示：
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>
希望這可以幫助！ :)
解決方案2
1 2017-12-20 21:10:00
我可能會看這樣的東西。 首先，從內聯中刪除偵聽器。 然后，從腳本中刪除硬編碼的樣式（雖然可以做到，但是維護一個類比切換單個樣式會容易得多）。 通過腳本添加偵聽器將更易於調試和編輯。 並讓偵聽器的回調執行您可能需要的任何切換。 試試這個！
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>
解決方案3
0 2017-12-20 21:34:53
首先，我強烈建議閱讀Decoupling Your HTML，CSS和JavaScript 。
如果我要編寫此代碼，它將是可重用的，並且不僅限於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>
現在，您幾乎可以在任意數量的位置中添加盡可能多的圖像（或所需的任何其他元素）：
// 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>
使用VISIBLE時遇到問題。 單擊復選框后，我的Javascript似乎未處理事件
[英]Having Issues with using VISIBLE. My Javascript doesnt seem to be handling the event when the check box is clicked
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.