如何为每个四分之一圆添加点击事件

Question

目标是为每个四分之一圆添加一个函数。该圆圈是通过以下方式生成的： HTML：<div class="circle">CSS：.circle {    margin: 1em auto;    border-radius: 50%;    width: 40px;    height: 40px;    box-sizing: border-box;    border-width: 20px;    border-style: solid;    border-color: red green blue yellow;    transform: rotate(45deg);}就像我在这里找到的：如何用四个四分之一创建圆我想在单击特定季度时执行函数quarterClicked()。

Answer 1

你可以像这样画你的圆圈：

<div class="circle">

  <div id="blue" class="quarter" onclick="quarterClicked()"></div>

  <div id="green" class="quarter" onclick="q2()"></div>

  <div id="red" class="quarter" onclick="q3()"></div>

  <div id="black" class="quarter" onclick="q4()"></div>

</div>

CSS：

.circle {

  display: block;

  padding: 0;

  width: 200px;

  height: 200px;

  border: 1px;

  border-radius: 50%;

  overflow: hidden;

}

.quarter {

  display: inline-block;

  float: left;

  margin: 0;

  padding: 0;

  width: 100px;

  height: 100px;

}

#blue {

  background-color: blue;

}

#green {

  background-color: green;

}

#red {

  background-color: red;

}

#black {

  background-color: black;

}

JavaScript：

quarterClicked(){

    //your code

}