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

问题描述 投票：-1回答：3

我试图保持这个相对简单，我花了过去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>

第一个片段工作，第一个图像消失，我只需要它再次显示第一个图像时单击第二个图像。

我试图在没有脚本的情况下这样做，但我不知道怎么做。第一张图片消失但我不明白为什么点击第一张图片不会让它再次消失。如果您粘贴自己的图片链接，您将能够看到我的意思。

如果有人可以复制我的代码并直接进行更改，那就太棒了。我认为有一些我不知道的东西，我在这个网站上找不到任何实际使用与我相同的方法的东西。

谢谢。

javascript jquery html css visibility
3个回答
3
投票

您的代码存在许多问题：

  • 您已尝试创建新标记以重置元素： alt="ALT TAG"> <onclick="resetElement()"> 您可能正在寻找内联事件处理程序属性（仍然是bad practice）。理想情况下，你应该使用.onclick。
  • 您的图像具有img属性，该属性不存在。
  • 你在<style>中有内联<body>标签。 <style> must come inside <head>。您可以使用W3C Markup Validation Service验证您的标记。
  • 当您的元素没有ID时，您将使用document.getElementById()定位元素。他们有课程，所以你可能正在寻找document.getElementsByClassName()。请注意，这将返回NodeList元素集合，因此您需要使用[0]访问第一个结果。
  • 你在N的声明中有一个资本Notice2，应该是notice2。
  • 你的resetElement()函数永远不会被调用。相反，你为display内联设置notice1（当你应该修改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>

希望这可以帮助！ :)

1
投票

我可能会看到这样的事情。首先，从内联中删除侦听器。然后，从脚本中删除硬编码样式（虽然你可以这样做，但简单地维护一个类比切换单个样式更容易）。通过脚本添加侦听器将更容易调试和编辑。让听众的回调做你可能需要的任何切换。试试这个吧！

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>
0
投票

首先，我强烈建议阅读Decoupling Your HTML, CSS, and 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>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.