So I am trying to solve this problem with a program I am writing, I have a div, with the class .main. It occupies a certain amount of space. Within it, there are two buttons. When .button1 is clicked, .light1 is turned on. When .button2 is clicked, .light2 is turned on. BUT. I want it so that when .button1 OR the blank space in .main is clicked, light 1 turns on. So far, when I do that, only the empty space turns .light1 on. Removing .main from the function makes it so .button1 turns .light1 on.
The issue for me is, since the buttons are WITHIN the div, clicking any of buttons activates whatever would activate the div.
I have some working code for this, it is completely self contained, copy paste this into an HTML file if you like:
<!DOCTYPE html>
<head><meta charset="UTF-8">
<title>I am a test page</title>
<!--bootstrap 3.3.6 and jquery 2.23-->
<script src="./js/jquery-2.2.3.min.js"></script>
<script src="./js/bootstrap.min.js"></script>
<link href="./css/bootstrap.min.css" rel="stylesheet"/>
<style>
.main
{
background-color: rgba(98,159,210, 0.3);
border-radius: 1px;
font-size: 14px;
color: black;
width: 400px;
margin-left: auto;
margin-right: auto;
height: 50px;
padding:3px;
cursor: pointer;
}
.button1
{
}
.button2
{
}
.light1
{
height: 100px;
width: 100px;
background-color: yellow;
}
.light2
{
height: 100px;
width: 100px;
background-color: red;
}
</style>
</head>
<body>
<div class="container">
<br><br>
<div class="main">
<button class="button1">button1</button>
<button class="button2">button2</button>
</div>
<br>
<br><br><br><br>
<div class="light1"></div>
<div class="light2"></div>
</div>
</body>
<script>
$(document).on("click", ".button1, .main", function()
{
$(".light1").toggle();
});
$(document).on("click", ".button2", function()
{
$(".light2").toggle();
});
</script>
See Question&Answers more detail:
os 与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
