堆栈内存溢出
  简体   繁体   English

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

[英]How to use one button to run two different functions?

 原文  2019-06-14 11:30:49  2   2    javascript

问题描述

I have an image with several different overlays. 我有一个带有几个不同叠加层的图像。 The first overlay is visible and when a user clicks a button I want to hide the original overlay and display the overlay connected to that button. 第一个叠加层是可见的，当用户点击按钮时，我想要隐藏原始叠加层并显示连接到该按钮的叠加层。 I have two separate bits of Javascript and they each work separately, but when put together they do not work. 我有两个单独的Javascript位，它们各自单独工作，但是当它们放在一起时它们不起作用。

I'm not sure how to get a button to do one function using onclick and the other one as well. 我不知道如何使用onclick和另一个来获得一个按钮来执行一个功能。 I am newish to JavaScript so I am probably missing something simple. 我对JavaScript很新，所以我可能错过了一些简单的东西。 I created the second bit of script first using the event listener and then added the onclick later so as to show the original overlay. 我首先使用事件监听器创建了第二个脚本，然后稍后添加了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>

What I would like to end up with is the "overlay" div showing on load and being hidden on click while the selected div is shown on click. 我想最终得到的是“叠加”div显示加载并在点击时隐藏，而所选的div显示在点击上。 Any help would be appreciated! 任何帮助，将不胜感激！

2 个解决方案

解决方案1
 0  2019-06-14 12:08:17

Probably the easiest way is to give each overlay some sort of data- attribute so you can select it. 可能最简单的方法是为每个叠加层提供某种data-属性，以便您可以选择它。 Then, you can give each button a function that will both hide all the other overlays, and show the one you need. 然后，您可以为每个按钮提供一个隐藏所有其他叠加层的功能，并显示您需要的那个。 You do this by creating a new function that will call the other two functions that you need: 您可以通过创建一个新函数来完成此操作，该函数将调用您需要的其他两个函数： 

 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>

解决方案2
 0 已采纳  2019-06-14 12:32:02

Just by dynamically changing image src also works i did some modification to your code try it 只是通过动态更改图像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>

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 一键两种功能 - One button with two different functions 一个按钮在不同的单击上调用两种不同的功能 - one button calls two different functions on different clicks 一键两种功能 - one button with two functions JS/VueJS 一键运行两个函数 - Run two functions on one button click in JS/VueJS 使用 flask 执行两个不同的功能和一个提交按钮 - perform two different functions and one submit button using flask 使用一个按钮Javascript运行2个功能 - Run 2 functions with one button Javascript 如何在单个按钮单击事件上运行两个功能 - How do I run two functions on a single button click event 如何同时运行两个具有不同功能的案例？ - How to run two cases with different functions at the same time? 您如何在javascript中运行两个不同的函数 - How do you run two different functions in javascript php-ajax：如何在表单中的每个工作中使用两个提交按钮以实现不同的目的 - php-ajax: how to use two submit button on form every one work for different purpose
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM