如何使用一个按钮来运行两个不同的功能？

时间：2019-06-14 11:30:49

标签： javascript

我有一张带有几个不同覆盖层的图像。第一个叠加层是可见的，当用户单击按钮时，我想隐藏原始叠加层并显示连接到该按钮的叠加层。我有两个单独的Javascript，它们各自分别工作，但是放在一起时它们不起作用。

我不确定如何获得一个按钮来使用onclick以及另一个功能来执行一项功能。我刚接触JavaScript，因此可能缺少一些简单的东西。我首先使用事件侦听器创建了脚本的第二位，然后稍后添加了onclick以便显示原始覆盖。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>repl.it</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
<style>
@font-face {
    font-family: 'd-din_condensedregular';
    src: url('https://static1.squarespace.com/static/5c256284620b85c4b8b6f684/t/5cf648197285b20001011026/1559644185350/d-dincondensed-webfont.woff2') format('woff2'),
         url('https://static1.squarespace.com/static/5c256284620b85c4b8b6f684/t/5cf6481197a71f00013cfeaa/1559644177152/d-dincondensed-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

.hide {
z-index:2;
display: none;

}
.hidingsection{
  background-image: url("https://res.cloudinary.com/dnu8yyawg/image/upload/v1559688402/elke/map_base_1_r6fiqd.png");
background-repeat: no-repeat;
background-size:contain;
  width:1080px;
  height:653px;
background-color:#f3f4f4;
  margin-left:0px;
}

.hidingsection{z-index:0;}
.alertName{ text-align: center;
  background-color: #b2bb1e;
  padding: .6em .8em .8em;
  border: none;
  color: #fff;
  margin: 5px;
  font-family: 'd-din_condensedregular';
  cursor: pointer;
  box-shadow: inset 0 -.2em rgba(0,0,0,.2);
  outline: 0;
  transition: .2s;
  will-change: transform;
}
.alertName:active {
  transform: scale(.9);

}
.buttons{display:flex; justify-content:space-around;}

.container{display:flex; flex-flow:column; justify-content: center;}

.hide img{
  width:1080px;
  height:653px;
}

.map img {
  width:1080px;
  height:653px;
}

#overlay{
  width:1080px;
  height:653px;
  display:block;
}
.default{display:none;}
  /* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
/* Styles */
  .hide img{
  width:325px;
  height:197px;
}

  .hidingsection{
  background-image: url("https://res.cloudinary.com/dnu8yyawg/image/upload/v1559671263/elke/imageedit_133_6444982912_1_hasrro.png");
background-repeat: no-repeat;
background-size:contain;
  width:325px;
  height:197px;
background-color:#f3f4f4;
  margin-left:0px;
}

  .alertName{ text-align: center;
  background-color: #b2bb1e;
  padding: .6em .8em .8em;
  border: none;
  color: #fff;
  margin: 5px;
  font-family: 'd-din_condensedregular';
  cursor: pointer;
  box-shadow: inset 0 -.2em rgba(0,0,0,.2);
  outline: 0;
  transition: .2s;
  will-change: transform;
    font-size:7px;
}

}

  /* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
/* Styles */
   .hide img{
  width:670px;
  height:405px;
}

  .hidingsection{
  background-image: url("https://res.cloudinary.com/dnu8yyawg/image/upload/v1559686207/elke/map_base_jeg9zh.png");
background-repeat: no-repeat;
background-size:contain;
  width:670px;
  height:405px;
background-color:#f3f4f4;
  margin-left:0px;
}



}

</style>
  </head>
  <body>
<div class="container">

  <div class ="map">
<section class="hidingsection">
<div id = "overlay"><img src ="https://res.cloudinary.com/dnu8yyawg/image/upload/v1559686870/elke/recreation_2000px_1_f2dh0s_eo0iuk.png"/>

<div class="hide schoolContent">

<img src="https://res.cloudinary.com/dnu8yyawg/image/upload/v1559669567/elke/schools_yes_2000px_rlsamn.png"/>

</div>
<div class ="hide recreationContent">
<img src="https://res.cloudinary.com/dnu8yyawg/image/upload/v1559670471/elke/recreation_2000px_1_f2dh0s.png"/>

</div>

<div class="hide restaurantsContent">

<img src="https://res.cloudinary.com/dnu8yyawg/image/upload/v1559922796/elke/restaurants_2000px_1_diolpo_pnjkdt.png"/>

</div>

<div class="hide groceriesContent">
  <img src="https://res.cloudinary.com/dnu8yyawg/image/upload/v1559670128/elke/groceries_2000px_hvr4f2.png"/>
  </div>

<div class="hide banksContent">

<img src="https://res.cloudinary.com/dnu8yyawg/image/upload/v1559670312/elke/comm_amenities_i4xgdk.png"/>

</div>


</section></div>

<div class="buttons"><div>

<button  class="alertName toggleBtn" name="schoolContent"  >SCHOOLS</button></div>

<div><button  class="alertName" name="recreationContent">RECREATION</button></div>

<div><button  class="alertName" name="restaurantsContent">RESTAURANTS</button></div>

<div><button  class="alertName" name="groceriesContent">GROCERY STORES</button>

</div>

<div><button  class="alertName" name="banksContent">COMMUNITY AMENITIES</button>

</div>


</div>
</div>
    <script>

function myFunction() {
  var x = document.getElementById("overlay");
  if (x.style.display === "block") {
    x.style.display = "none";
  } else {
    x.style.display = "block";
  }

}


var alertName = document.getElementsByClassName("alertName");


var myFunction = function() {

var hide = document.getElementsByClassName("hide");

for (var i = 0; i < hide.length; i++) {

hide[i].style.display = "none";

}

var name = this.getAttribute("name");

var show = document.querySelector('.' + name);

if (show.style.display == "none") {

show.style.display = "block";

}

else {

show.style.display = "none";

}


};

for (var i = 0; i < alertName.length; i++) {

alertName[i].addEventListener('click', myFunction);


}



</script>
  </body>
</html>

我最后要说的是“重叠” div在加载时显示，在单击时隐藏，而所选div在单击时显示。任何帮助将不胜感激！

2 个答案:

答案 0 :(得分：0)

最简单的方法可能是为每个叠加层提供某种data-属性，以便您可以选择它。然后，您可以为每个按钮提供一个功能，该功能将隐藏所有其他叠加层，并显示您需要的一个。为此，您可以创建一个新函数，该函数将调用您需要的其他两个函数：

const showDivWithDataOverlay = dataOverlayValue => document
    .querySelector(`div[data-overlay="${dataOverlayValue}"]`)
    .style.display = 'inline-block';

const hideAllDataOverlayDivs = () => document
  .querySelectorAll('div')
  .forEach(el => el.style.display = 'none')

const showOnly = dataOverlayToShow => {
  hideAllDataOverlayDivs();
  showDivWithDataOverlay(dataOverlayToShow);
}

showOnly('a');
<div data-overlay="a">a</div>
<div data-overlay="b">b</div>
<div data-overlay="c">c</div>

<button onclick="showOnly('a')">a</button>
<button onclick="showOnly('b')">b</button>
<button onclick="showOnly('c')">c</button>

答案 1 :(得分：0)

通过动态更改图像src也可以，我对您的代码做了一些修改，请尝试 

var srcs = {
        original: "https://res.cloudinary.com/dnu8yyawg/image/upload/v1559686870/elke/recreation_2000px_1_f2dh0s_eo0iuk.png",
        schoolContent: "https://res.cloudinary.com/dnu8yyawg/image/upload/v1559669567/elke/schools_yes_2000px_rlsamn.png",
        recreationContent: "https://res.cloudinary.com/dnu8yyawg/image/upload/v1559670471/elke/recreation_2000px_1_f2dh0s.png",
        restaurantsContent: "https://res.cloudinary.com/dnu8yyawg/image/upload/v1559922796/elke/restaurants_2000px_1_diolpo_pnjkdt.png",
        groceriesContent: "https://res.cloudinary.com/dnu8yyawg/image/upload/v1559670128/elke/groceries_2000px_hvr4f2.png",
        banksContent: "https://res.cloudinary.com/dnu8yyawg/image/upload/v1559670312/elke/comm_amenities_i4xgdk.png"
      };
      var alertName = document.getElementsByClassName("alertName");
      for (var i = 0; i < alertName.length; i++) {
        alertName[i].addEventListener('click', function(e) {
          changecontent(this)
        })
      }

      function changecontent(ele) {
        var overlayimg = document.getElementById("overlayimage");
        if (overlayimg.src === srcs[ele.name]) {
          overlayimg.src = srcs["original"];
        } else {
          overlayimg.src = srcs[ele.name];
        }
      }
 @font-face {
      font-family: 'd-din_condensedregular';
      src: url('https://static1.squarespace.com/static/5c256284620b85c4b8b6f684/t/5cf648197285b20001011026/1559644185350/d-dincondensed-webfont.woff2') format('woff2'),
      url('https://static1.squarespace.com/static/5c256284620b85c4b8b6f684/t/5cf6481197a71f00013cfeaa/1559644177152/d-dincondensed-webfont.woff') format('woff');
      font-weight: normal;
      font-style: normal;

    }

    .hide {
      z-index: 2;
      display: none;

    }

    .hidingsection {
      background-image: url("https://res.cloudinary.com/dnu8yyawg/image/upload/v1559688402/elke/map_base_1_r6fiqd.png");
      background-repeat: no-repeat;
      background-size: contain;
      width: 1080px;
      height: 653px;
      background-color: #f3f4f4;
      margin-left: 0px;
    }

    .hidingsection {
      z-index: 0;
    }

    .alertName {
      text-align: center;
      background-color: #b2bb1e;
      padding: .6em .8em .8em;
      border: none;
      color: #fff;
      margin: 5px;
      font-family: 'd-din_condensedregular';
      cursor: pointer;
      box-shadow: inset 0 -.2em rgba(0, 0, 0, .2);
      outline: 0;
      transition: .2s;
      will-change: transform;
    }

    .alertName:active {
      transform: scale(.9);

    }

    .buttons {
      display: flex;
      justify-content: space-around;
    }

    .container {
      display: flex;
      flex-flow: column;
      justify-content: center;
    }

    .hide img {
      width: 1080px;
      height: 653px;
    }

    .map img {
      width: 1080px;
      height: 653px;
    }

    #overlay {
      width: 1080px;
      height: 653px;
      display: block;
    }

    .default {
      display: none;
    }

    /* Smartphones (portrait and landscape) ----------- */

    @media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
      /* Styles */
      .hide img {
        width: 325px;
        height: 197px;
      }

      .hidingsection {
        background-image: url("https://res.cloudinary.com/dnu8yyawg/image/upload/v1559671263/elke/imageedit_133_6444982912_1_hasrro.png");
        background-repeat: no-repeat;
        background-size: contain;
        width: 325px;
        height: 197px;
        background-color: #f3f4f4;
        margin-left: 0px;
      }

      .alertName {
        text-align: center;
        background-color: #b2bb1e;
        padding: .6em .8em .8em;
        border: none;
        color: #fff;
        margin: 5px;
        font-family: 'd-din_condensedregular';
        cursor: pointer;
        box-shadow: inset 0 -.2em rgba(0, 0, 0, .2);
        outline: 0;
        transition: .2s;
        will-change: transform;
        font-size: 7px;
      }

    }

    /* iPads (portrait and landscape) ----------- */

    @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
      /* Styles */
      .hide img {
        width: 670px;
        height: 405px;
      }

      .hidingsection {
        background-image: url("https://res.cloudinary.com/dnu8yyawg/image/upload/v1559686207/elke/map_base_jeg9zh.png");
        background-repeat: no-repeat;
        background-size: contain;
        width: 670px;
        height: 405px;
        background-color: #f3f4f4;
        margin-left: 0px;
      }



    }
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>repl.it</title>
  <link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
  <div class="container">
    <div class="map">
      <section class="hidingsection">
        <div id="overlay"><img id="overlayimage" src="https://res.cloudinary.com/dnu8yyawg/image/upload/v1559686870/elke/recreation_2000px_1_f2dh0s_eo0iuk.png" />
        </div>
      </section>
      </div>

      <div class="buttons">
        <div>

          <button class="alertName toggleBtn" name="schoolContent">SCHOOLS</button></div>

        <div><button class="alertName" name="recreationContent">RECREATION</button></div>

        <div><button class="alertName" name="restaurantsContent">RESTAURANTS</button></div>

        <div><button class="alertName" name="groceriesContent">GROCERY STORES</button>

        </div>

        <div><button class="alertName" name="banksContent">COMMUNITY AMENITIES</button>

        </div>

      </div>
    </div>
</body>

</html>

相关问题
最新问题